时间戳

首页 > 解决方案 > 仅在 xs（智能手机和 iphone）中在 Bootstrap 4 中应用底部边距

css - 仅在 xs（智能手机和 iphone）中在 Bootstrap 4 中应用底部边距

问题描述

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

{property}{sides}-{size}这些类使用forxs和{property}{sides}-{breakpoint}-{size}for sm、md、lg和的格式命名xl。​</p>

问题在于，使用 xs 格式 ,{property}{sides}-{size}将是mb-4, 将应用相同的边距底部间距到sm, md, lg, 和xl。

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

标签： cssbootstrap-4

解决方案

由于这些类应用它们的样式来增加屏幕大小并且 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>

推荐阅读