Bootstrap 不同视口的间距助手？

Question

我有以下代码。

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

在 Firefox 的开发者工具中，当我 select 带有选择器的元素时，它似乎无法识别 class 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 断点适用于横向智能手机；所以也许你还没有触发正确的断点

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

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>

Bootstrap 不同视口的间距助手？

Bootstrap Spacing Helper at Different Viewports?

css

spacing

twitter-bootstrap

bootstrap-4