使用Twitter Bootstrap添加垂直空格？

使用Twitter的Bootstrap添加垂直空白的最佳方法是什么？

例如，假设我正在创建一个着陆页，并且想要某个按钮上方和下方的空白（100px）。显然，我可以为该特定按钮创建特定的类。但是，我认为Bootstrap应该采用DRY方式添加垂直空白。

在Bootstrap 4中，有间隔实用程序。

引用使用过的符号的文档：

适用于所有断点（从xs到）的间距实用程序中xl没有断点的缩写。这是因为这些类是反复应用的min-width: 0，因此不受媒体查询的约束。但是，其余的断点确实包含断点的缩写。

类是使用的格式命名{property}{sides}-{size}为xs 和{property}{sides}-{breakpoint}-{size}为sm，md，lg，和xl。

其中财产是以下之一：

• m -对于设置的课程 margin
• p -对于设置的课程 padding

其中边是以下之一：

• t-对于设置margin-top或padding-top
• b-对于设置margin-bottom或padding-bottom
• l-对于设置margin-left或padding-left
• r-对于设置margin-right或padding-right
• x-对于同时设置*-left和*-right
• y-对于同时设置*-top和*-bottom
• 空白-用于在元素的所有4侧设置a margin或padding4的类

其中大小是以下之一：

• 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-5class。

在v2中，没有太多内置功能可用于垂直空间，因此您需要坚持使用自定义类。对于较小的高度，我通常只<div class="control-group">在按钮周围扔一个。

包装可以，但是当您只想要一个空间时，我喜欢：

<div class="col-xs-12" style="height:50px;"></div>

很抱歉在这里挖一个老坟墓，但是为什么不这样做呢？

<div class="form-group">
    &nbsp;
</div>

它将在普通表单元素的高度上添加一个空格。

似乎表格上的1行大约为50px（我刚刚检查的元素上为47px）。这是一个水平形式，标签在左边2col，输入在右边10col。因此，您的像素可能会有所不同。

因为我的基本上是50px，所以我将创建一个50px高的间隔，没有边距或填充；

.spacer { margin:0; padding:0; height:50px; }
<div class="spacer"></div>

我知道这很老了，但是我来这里寻找同样的东西，我发现Bootstrap有帮助块，对于这些情况非常方便：

<div class="help-block"></div>

对于版本3，似乎没有“引导”方式可以很好地实现这一目标。

A panel，a well和a form-group全部提供一些垂直间距。

显然，引导v4的路线图上有一个更正式的特定垂直间距解决方案

https://github.com/twbs/bootstrap/issues/4286#issuecomment-36331550 https://github.com/twbs/bootstrap/issues/13532

我只是使用各种高度创建了一个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;
}

只需为需要的高度创建一个分隔器类。

我的把戏 不是很优雅，但是可以工作：

<p>&nbsp;</p>

只需使用<br/>。我在这里发现自己正在寻找该问题的答案，然后由于不考虑使用用户JayKilleen在评论中建议的简单换行而感到很傻。

我知道这已经很老了，已经发布了几个好的解决方案，但是下面的CSS对我有用：

<style>
  .divider{
    margin: 0cm 0cm .5cm 0cm;
  }
</style>

然后在您的html中创建一个div

<div class="divider"></div>

我尝试使用<div class="control-group">，但没有更改我的布局。它没有增加垂直空间。对我有用的解决方案是：

<ol style="visibility:hidden;"></ol>

如果这样不能为您提供足够的垂直空间，则可以通过添加嵌套<li>&nbsp;</li>标签来逐步获得更多空间。

<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

没有比这更干燥

.btn {
    margin-bottom:5px;
}