css - 不同视口(viewport)的 Bootstrap 间距助手？

Question

我有以下代码。

<section class="visit-section mb-7 mt-7 mb-sm-3 mt-sm-3 nb-md-5">
</section>

在 Firefox 的开发人员工具中，当我使用选择器选择元素时，它似乎无法识别类 mb-sm-3 或 mt-sm-3。换句话说，它添加的间距来自 mb-7 和 mt-7。寻找 30 分钟后，我不完全确定为什么会这样。 :-\

是不是我对 Bootstrap 4 手册的理解有误？ Bootstrap Manual

Answer 1

您的想法应该运作良好，但我在您的代码中注意到一些事情阻止了它正常运行:

• Bootstrap 的间距实用程序从 0 到 5，如 mb-0 | mb-5，除非您自己指定，否则没有 mb-7。参见 here
• 请记住，sm 断点适用于横向智能手机；所以也许你还没有触发正确的断点

如果您在全屏模式下尝试下面的代码，您会发现当您调整浏览器窗口大小时边距实际上发生了变化；我对您的代码所做的只是将 mb-7 类更改为 mb-5 并修复您最后一个类的拼写错误

section {
  height: 100px;
  background-color: red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<section class="visit-section mb-5 mt-5 mb-sm-3 mt-sm-3 mb-md-5">
</section>

<section class="visit-section mb-5 mt-5 mb-sm-3 mt-sm-3 mb-md-5">
</section>