特定断点的引导类答案

【问题标题】：Bootstrap classes for specific breakpoints特定断点的引导类
【发布时间】：2020-09-26 08:45:09
【问题描述】：

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

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

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

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

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

谢谢！

【问题讨论】：

dev.to/shhdharmen/responsive-size-classes-in-bootstrap-3ojl

标签： css twitter-bootstrap class bootstrap-4

【解决方案1】：

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

所以我决定在media query 的帮助下创建一个CSS 项目，以基于Bootstrap 以不同的分辨率为不同的width sizes。

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

这里是样式表的链接：

&lt;link rel="stylesheet" href="https://drive.google.com/uc?id=1jLrfISsLUcRiwgNl0koSfsS6lylj0E7h"&gt;

现场示例：

<!-- 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?id=1jLrfISsLUcRiwgNl0koSfsS6lylj0E7h">

<!-- 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，它只对md有效，对xl或lg无效。

所以为了使它适用于大于md 的设备。

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

【讨论】：

当我看到互联网上没有任何提及时，我也想这样做。谢谢！

【解决方案2】：

如果你想做这样的事情：

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

【讨论】：