Bootstrap 4 响应间距不起作用

Question

我正在使用类定义的

使用响应式断点 {属性}{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，但事实并非如此。

Answer 1

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>

Answer 2

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

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

这为 sm 下方（在本例中为 xs）创建了 3 的边距底部，然后 sm 和上方的边距为零。

感谢您的帮助。

Answer 3

您应该使用 CSS 作为响应间距。

.my-margin {
    margin-bottom: 0;
  }
@media only screen and (max-width: 576px) {
  .my-margin {
    margin-bottom: 2rem;
  }
}

Bootstrap 4 响应间距不起作用

Bootstrap 4 responsive spacing not working

spacing

twitter-bootstrap

bootstrap-4