特定断点的引导类

Question

我想知道是否有办法使 Boostrap 类特定于断点。

我知道有一些像 col-sm-2 col-md-4 等等。但我现在真正要寻找的是元素的 _宽度_。

宽度 100% 的当前代码： className="w-100"

我想有一些方法可以使用 w-sm-100 w-md-75 w-lg-50 或 sm-w-100 md-w-75 lg-w-50 但我在 Bootstrap 文档或其他任何地方都没有找到类似的东西。

那么，有没有一种简单的方法可以做到这一点，还是我们必须通过 css 中的媒体查询来做到这一点？

谢谢 ！

原文由 Miklw 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

有一段时间我也在寻找同样的问题，除了使用 media query 之外没有找到解决方案。

So I decided to create a CSS project with the help of media query for different width sizes at different resolution based on Bootstrap .

因此，每当我想使用这样的 w-sm-100 w-md-50 w-lg-25 时，我可以简单地在我的 bootstrap CDN 链接之后包含我自己创建的 stylesheet CDN Link 然后我可以使用这样的 classes 像这样。

这是样式表的链接：

 <link rel="stylesheet" href="https://drive.google.com/uc?export=view&id=1yTLwNiCZhIdCWolQldwq4spHQkgZDqkG">

现场示例：

 <!-- Bootstrap CDN link -->

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<!-- My own Stylesheet CDN Link -->
<link rel="stylesheet" href="https://drive.google.com/uc?export=view&id=1yTLwNiCZhIdCWolQldwq4spHQkgZDqkG">

<!-- HTML -->
<h1 class="w-xl-75 w-lg-100 w-md-50 w-sm-75 w-100 bg-primary">Hello World</h1>

The only disadvantage is that if you want to specify the property w-md-50 , it will work only on md not on xl or lg .

因此，为了使其适用于大于 md 的设备。

你必须这样做： w-xl-50 w-lg-50 w-md-50 。

原文由 Fareed Khan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对于 Bootstrap 5。将其添加到您的变量文件中，它将执行您所描述的操作。

 @import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
$utilities, ( "width": map-merge(
map-get( $utilities, "width"), ( responsive: true ),),)
);

更多信息在这里： https ://getbootstrap.com/docs/5.0/utilities/api/#enable-responsive

原文由 user1891758 发布，翻译遵循 CC BY-SA 4.0 许可协议