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。将屏幕大小从大到小调整，并观察边距和填充的变化情况。