使用Twitter Bootstrap添加垂直空白？

Question

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

例如,假设我正在创建一个登录页面,并希望在某个按钮的上方和下方有一点(100px)的空白空白.显然,我可以为该特定按钮创建一个特定的类.但是,我认为Bootstrap应该有一种干燥的方式来添加垂直空格.

Answer 1

在v2中,没有任何内置用于那么多的垂直空间,所以你需要坚持使用自定义类.对于较小的高度,我通常只是按<div class="control-group">一下按钮.

Answer 2

包装有效,但当你想要一个空间时,我喜欢:

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

Answer 3

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

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

它会在正常表单元素的高度上添加一个空格.

看起来表格上的大约1行约为50px(我刚刚检查过的元素为47px).这是一种水平形式,左边2col上有标签,右边10col上有输入.所以你的像素可能不同.

由于我的基本上是50px,我会创建一个50px高的垫片,没有边距或填充;

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

Answer 4

在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个边margin或padding在其上的类

其中大小为以下之一:

• 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类.

Answer 5

我知道这是旧的,但我来到这里寻找同样的事情,我发现Bootstrap有帮助块,非常方便这些情况:

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

Answer 6

对于版本3,似乎没有"引导"方式来实现这一点.

A panel,a well和a form-group都提供一些垂直间距.

显然,更正式的特定垂直间距解决方案是bootstrap v4的路线图

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

Answer 7

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

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

Answer 8

我的把戏.不优雅,但它有效:

<p>&nbsp;</p>

Answer 9

我知道这是旧的，并且已经发布了几个很好的解决方案，但是对我有用的简单解决方案是以下 CSS

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

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

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

Answer 10

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