css - 仅在xs(智能手机和iPhone)中的Bootstrap 4中应用底部边距

Getbootstrap.com指示将CSS margin-bottom:4rem;放在图像上



问题在于，使用xs格式{property}{sides}-{size}(即mb-4)也会对sm，md，lg和xl应用相同的边距-底部间距。

有谁知道将Bootstrap中margin-bottom间距应用于xs和仅xs屏幕的技巧？我正在寻找的东西类似于Bootstrap中的“if语句”。

最佳答案

由于这些类会随着屏幕尺寸的增加而应用其样式，而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>