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;
   }
}

哪个套房最适合你。

移动设备上的Bootstrap网格系统？

1 个答案: