在 Bootstrap 4 中仅在 xs（智能手机和 iPhone）上应用底部边距。

Question

34

Getbootstrap.com网站介绍了如何将CSS margin-bottom:4rem; 应用于图像等元素。

类的命名格式为{属性}{方位}-{尺寸}，对于xs使用此格式，对于sm、md、lg和xl则使用{属性}{方位}-{断点}-{尺寸}。

问题在于，如果使用xs格式（{属性}{方位}-{尺寸}），即mb-4，则会将相同的下边距应用到sm、md、lg和xl上。

有没有人知道一种技巧，可以将Bootstrap的下边距间距应用于xs屏幕并且仅限于xs屏幕？我要找的是Bootstrap中的"if语句"。

- user1107199

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sebastian Speitel · Accepted Answer

由于类别是按照屏幕尺寸递增应用它们的样式，并且CSS是层叠的，您可以使用第二个类来覆盖第一个类。在您的示例中，可能会这样做：

<div class="mb-4 mb-sm-0"></div>

当第二个类被激活时，它会覆盖第一个类。

.mb-4 {
  margin-bottom: 1.5rem !important;
}

@media (min-width: 576px) {
  .mb-sm-0 {
    margin-bottom: 0 !important;
  }
}

<div class="mb-4 mb-sm-0"></div>