html - 当它们在 Bootstrap 中堆叠时，将顶部/底部填充添加到 .col-xx

Question

使用 bootstrap 3.3 时，当列从水平变为堆叠垂直时，在列之间添加填充的正确方法是什么。例如，如果我有下面的代码，当它们在 xs 断点处垂直堆叠时，顶部 block 和底部 block 夹在一起，它们之间没有填充/边距。我不想在 col-sm-7 上放置填充，因为当列并排时我不需要它。我想一种方法是创建一个特定的类，该类使用媒体查询在 xs 断点处添加填充，但很好奇是否还有其他解决方案……或者如果我在 Bootstrap 中遗漏了一些东西。

<div class="row">
    <div class="col-sm-7">
        <div>Plan 1: Basic</div>
        <div>$99 per month</div>
        <div>4 of 5 slots used</div>
    </div>
    <!-- WHEN THESE STACK I NEED SPACE BETWEEN THEM -->
    <div class="col-sm-5">
        <div class="text-right">
            <div><button class="btn btn-sm btn-block">Manage Users</button></div>
            <div><button class="btn btn-sm btn-block">Manage Plan</button></div>
        </div>
    </div>
</div>

Answer 1

在 Bootstrap 中 .row 和 .col-X-X 没有顶部和底部填充，你在他们的示例中看到垂直间距的原因是因为里面的内容.col-X-X 位于 p、ul、form、h1-h6 等标签内有顶部和底部边距。如果您使用 p 标签而不是 div，您将获得一些垂直空间。如果那不令人满意，通常我会制作这样的垂直垫片:

<hr class="vertical-spacer visible-xs">

使用响应实用程序来指示您希望该空间何时显示。

CSS

hr.vertical-spacer {
  border: 0px;
  background: none;
  margin: 2% 0;
  height: 1px;
  width: 100%;
  clear: both;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

在最大宽度媒体查询处添加填充也可以，但是当您将内容放入 p、h1-h6 时，您会得到额外的间距> 等等，这不会是一致的或不推荐的，这就是默认情况下 .col-X-X 类上没有直接填充/边距的原因。