Bootstrap 4响应间距不起作用答案

【问题标题】：Bootstrap 4 responsive spacing not workingBootstrap 4响应间距不起作用
【发布时间】：2018-05-06 20:55:55
【问题描述】：

我正在使用定义的类

使用响应式断点 {property}{sides}-{breakpoint}-{size} 将边距应用于元素 m(t,b,r,l,x,y)-(sm, md, lg, xl)-(0, 1, 2, 3, 4, 5)

意思是

<div class="col-12 mb-sm-3"></div>

应该在小型设备上生成一个底部边距的 div，但事实并非如此。

【问题讨论】：

标签： twitter-bootstrap bootstrap-4 spacing

【解决方案1】：

我知道发生了什么。 mb-sm-3 仅影响 576px 的最小宽度，因此在移动设备中，例如 iphone 6，最小宽度小于 576，所以我需要做的是：

<div class="col-12 mb-3 mb-sm-0"></div>

这会为低于 sm（在这种情况下为 xs）创建一个 3 的边距底部，然后 sm 及以上得到零。

感谢您的帮助。

【讨论】：

在 Bootstrap 方面似乎完全违反直觉。
我认为这就是所谓的移动优先方法
只是想为任何研究 Bootstrap 网格系统的人补充一下。 Bootstrap 使用移动优先的方法，这意味着他们设计的所有东西都好像是在手机上设计的一样，并且随着您逐渐增加屏幕宽度，它会适应。在这种情况下，您需要先设置手机屏幕宽度的边距，随着屏幕尺寸的增加，您可以调整边距。

【解决方案2】：

margin-bottom: 1rem!important; 正在添加到.mb-sm-3

检查一下

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-12 mb-sm-3" style="background:blue;height:20px;"></div>
<div>Space above is the margin of the `mb-sm-3`</div>

【讨论】：