在引导程序中堆叠时将顶部/底部填充添加到 .col-xx答案

【问题标题】：Adding top/bottom padding to .col-xx when they stack in bootstrap在引导程序中堆叠时将顶部/底部填充添加到 .col-xx
【发布时间】：2015-01-08 15:34:28
【问题描述】：

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

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

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

Bootstrap 中的.row 和.col-X-X 没有顶部和底部填充，您在他们的示例中看到垂直间距的原因是因为.col-XX 内的内容在p、@987654324 内@、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 类上没有填充/边距。

【讨论】：

好的，建议就到这里！

【解决方案2】：

只需在顶部添加这个html就可以给你一个小空间。

<div class="row">.</div>

【讨论】：