Question

使用bootstrap 3.3时，在从水平到堆叠垂直之间添加填充之间的正确方法是什么。例如，如果我在下面的代码中有以下代码，当它们在xs断点处堆叠垂直时，顶部块和底部块被夹在一起，它们之间没有填充/边距。我不想在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-XX内的内容位于{{ 1}}，p，ul，form等，具有上边距和下边距的标记。如果您使用的是h1-h6标记，而不是div，则会获得一些垂直空间。如果这不合适，通常我会制作一个这样的垂直间隔：

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

<强> CSS

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

在最大宽度媒体查询中添加填充也可以，但是当您将内容放在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类没有直接填充/边距的原因。

Answer 2

只需在顶部添加此html即可为您提供一个小空间。

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

当它们堆叠在引导程序中时，将顶部/底部填充添加到.col-xx

2 个答案: