css - 手机上的 Bootstrap 网格系统？

Question

查看以下JSFIDDLE

<div class="row">

  <div class="col-md-3 col-xs-6">
    <div style="background: blue;">
      test &amp; test &amp;
    </div>
  </div>

  <div class="col-md-3 col-xs-6">
    <div style="background: yellow;">
      test &amp; test &amp;
    </div>
  </div>

  <div class="col-md-3 col-xs-6">
    <div style="background: red;">
      test &amp; test &amp;
    </div>
  </div>

  <div class="col-md-3 col-xs-6">
    <div style="background: green;">
      test &amp; test &amp;
    </div>
  </div>

</div>

当你缩小浏览器时，不是应该在缩小窗口时添加边距(顶部和底部)吗？

我是否遗漏了某些内容，或者是否必须将其添加到媒体查询中？

Answer 1

默认情况下，Bootstrap 网格系统中的列没有边距。然而，行可以，但为了在底部添加一些边距，您必须添加一些简单的 CSS:

.row > .col-md-3 {
   margin-bottom: 10px;
}

或者，如果您不希望这成为通用规则，只需添加一些自定义类或 id 来进一步指定它。

您可以使用浏览器的检查器工具轻松查看列上使用的 CSS 规则。列没有边距，但有填充(左侧和右侧，而不是垂直)。如果您觉得这样更好，您可以将上面的常见 CSS 规则插入到媒体查询中，这取决于您的元素。

将其应用于媒体查询:

@media (max-width: 991px)
{
   .row > .col-md-3 {
      margin-bottom: 10px;
   }
}

哪个最适合您。