特定断点的引导类

Question

我想知道是否有办法使 Boostrap 类专门针对断点。

我知道有一些类似的col-sm-2 col-md-4东西。但我现在真正要寻找的是元素的宽度。

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

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

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

谢谢 ！

Answer 1

如果你想做这样的事情：

<img class="w-100 w-md-50" src="..." alt="...">

您可以通过使用 div 和类“col”和“mx-auto”来完成此操作，如下所示：

<div class="col col-md-6 mx-auto">
  <img class="w-100" src="..." alt="...">
</div>

Answer 2

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

所以我决定在不同分辨率CSS的帮助下创建一个项目。media querywidth sizesBootstrap

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

这是样式表的链接：

<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>

唯一的缺点是，如果您想指定属性w-md-50，它只能在 or 上起作用，md而不能在xlor上起作用lg。

因此，为了使其适用于大于md.

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

Answer 3

对于 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