使用 Twitter 的 Bootstrap 添加垂直空白的最佳方法是什么？
例如，假设我正在创建一个登录页面，并且希望在某个按钮的上方和下方留出一点 (100 像素) 的空白。显然，我可以为那个特定的按钮创建一个特定的类。但是，我认为 Bootstrap 应该有一个 DRY 的方式来添加垂直空格。
【问题讨论】：
标签： twitter-bootstrap whitespace vertical-alignment twitter-bootstrap-2
在 Bootstrap 4/5 中有间距实用程序（BS4、BS5）。
文档摘录：
适用于所有断点的间距实用程序，从
xs到xl， 其中没有断点缩写。这是因为那些类 从min-width: 0及以上应用，因此不受 媒体查询。但是，其余断点确实包括 断点缩写。这些类使用
{property}{sides}-{size}格式命名为xs和{property}{sides}-{breakpoint}-{size}用于sm、md、lg和xl。其中属性是以下之一：
m- 用于设置margin的类p- 用于设置padding的类sides 是其中之一（请注意 BS4 和 BS5 的区别）：
t- 用于设置margin-top或padding-top的类b- 用于设置margin-bottom或padding-bottom的类l- 用于设置margin-left或padding-left(Bootstrap 4) 的类s- 用于设置margin-left或padding-left(Bootstrap 5) 的类r- 用于设置margin-right或padding-right(Bootstrap 4) 的类e- 用于设置margin-right或padding-right(Bootstrap 5) 的类x- 用于同时设置*-left和*-right的类y- 用于同时设置*-top和*-bottom的类- 空白 - 用于在元素的所有 4 个侧面都设置了
margin或padding的类其中 size 是以下之一：
0- 用于通过将其设置为0来消除边距或填充的类1-（默认情况下）用于将margin或padding设置为$spacer * .25的类2- （默认情况下）用于将margin或padding设置为$spacer * .5的类3-（默认情况下）用于将margin或padding设置为$spacer的类4-（默认情况下）用于将margin或padding设置为$spacer * 1.5的类5-（默认情况下）用于将margin或padding设置为$spacer * 3的类
所以要在元素上方和下方有一些额外的垂直空间，您可以使用my-5 类。
【讨论】：
我知道这是旧的，并且已经发布了几个很好的解决方案，但是一个对我有用的简单解决方案是以下 CSS
<style>
.divider{
margin: 0cm 0cm .5cm 0cm;
}
</style>
然后在你的html中创建一个div
<div class="divider"></div>
【讨论】：
我只是使用不同的高度创建了一个 div 类，即
<div class="divider-10"></div>
CSS 是：
.divider-10 {
width:100%;
min-height:1px;
margin-top:10px;
margin-bottom:10px;
display:inline-block;
position:relative;
}
只需为需要的高度创建一个分隔器类。
【讨论】：
在 v2 中，没有内置任何东西来容纳这么大的垂直空间，因此您需要坚持使用自定义类。对于较小的高度，我通常只是在按钮周围放置一个<div class="control-group">。
【讨论】：
.btn-toolbar 周围的间距最小化，因此您应该添加一个具有自己边距的新类。
只需使用<br/>。我发现自己在这里寻找这个问题的答案，然后觉得有点愚蠢，因为没有考虑使用用户 JayKilleen 在评论中建议的简单换行符。
【讨论】：
我的把戏。不优雅，但它有效：
<p> </p>
【讨论】：
<form>
<fieldset class="form-group"><input type="text" class="form-control" placeholder="Input"/></fieldset>
<fieldset class="form-group"><button class="btn btn-primary"/>Button</fieldset>
</form>
http://v4-alpha.getbootstrap.com/components/forms/#form-controls
【讨论】：
我知道这是旧的，但我来到这里寻找同样的东西，我发现 Bootstrap 有帮助块，非常适合这些情况：
<div class="help-block"></div>
【讨论】：
很抱歉在这里挖了一个旧坟墓，但为什么不这样做呢？
<div class="form-group">
</div>
它将添加一个正常表单元素高度的空间。
似乎表单上的 1 行大约是 50 像素（我刚刚检查的元素上是 47 像素）。这是一个横向的表格，左边 2col 有标签，右边 10col 有输入。所以你的像素可能会有所不同。
因为我的基本上是 50px，我会创建一个 50px 高的间隔器，没有边距或填充；
.spacer { margin:0; padding:0; height:50px; }
<div class="spacer"></div>
【讨论】：
包装有效，但当你只想要一个空间时，我喜欢：
<div class="col-xs-12" style="height:50px;"></div>
【讨论】：
对于版本 3，似乎没有“引导”方式来巧妙地实现这一目标。
panel、well 和 form-group 都提供了一些垂直间距。
显然，更正式的特定垂直间距解决方案在 bootstrap v4 的路线图上
https://github.com/twbs/bootstrap/issues/4286#issuecomment-36331550 https://github.com/twbs/bootstrap/issues/13532
【讨论】：
我尝试使用<div class="control-group">，但它并没有改变我的布局。它没有增加垂直空间。对我有用的解决方案是：
<ol style="visibility:hidden;"></ol>
如果这不能为您提供足够的垂直空间，您可以通过添加嵌套的<li>&nbsp;</li> 标签逐步获得更多空间。
【讨论】：
没有什么比干燥更干燥了
.btn {
margin-bottom:5px;
}
【讨论】：