Twitter Bootstrap：在网格行之间添加填充，仅在行堆叠时出现

Question

我将 Twitter Bootstrap 用于一个简单的单行两列网格。对于小尺寸、中尺寸和大尺寸，一切看起来都很好，但在超小 (xs) 屏幕区域上，两列相互堆叠形成一列两行。这也是想要的。但是，这两行堆叠在一起时没有填充或边距。

我应该在哪里添加填充或边距，以便这两个堆叠的行之间有一些空间？但除此之外，当它们没有堆叠时，并且不需要此填充或边距，则不会显示不必要的填充或边距。

Answer 1

我没有你的代码，所以我不知道你到底在做什么，所以我会根据我会做什么来做假设。

我假设您的列定义如下：

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">col 1</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">col 2</div>

有人可能会猜测，您只需要在样式表中定义一个新规则，为 col-xs-12 类提供填充，如下所示：

.col-xs-12 {
    padding: 5px 5px;
    margin: 5px 0px;
}

但是，即使屏幕尺寸不是xs，单独执行此操作也会将这些属性应用于您的列。所以，我应用了一个看起来像这样的解决方法：

<div class="container">
    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6 hidden-xs">"col" 1</div>
        <div class="col-lg-6 col-md-6 col-sm-6 hidden-xs">"col" 2</div>
        <div class="visible-xs col-xs-12">"row" 1</div>
        <div class="visible-xs col-xs-12">"row" 2</div>
    </div>
</div>

这个想法是你可以隐藏你的 xs 类，直到它真正需要它，同时显示你的另一个。

您可以看到结果here。将屏幕尺寸从大调整为超小，并观察边距和内边距的变化。