使用twitter引导添加垂直空白空间

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

例如，假设我正在创build一个login页面，并希望在某个button的上方和下方留出一些空白空白（100px）。 显然，我可以为特定的button创build一个特定的类，但是我认为Bootstrap应该在垂直空格中添加一些DRY方法。

Answer 1

没有什么内置的垂直空间，所以你会想要坚持一个自定义的类。 对于较小的高度，我通常只是在button周围放置一个<div class="control-group"> 。

Answer 2

包装的作品，但是当你只是想要一个空间，我喜欢：

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

Answer 3

对不起，在这里挖一个老坟，但为什么不这样做呢？

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

它将添加一个空间的正常forms元素的高度。

看起来大概有一行是大约50px（我检查过的元素是47px）。 这是一个水平的forms，在左边2col标签和右边10colinput。 所以你的像素可能会变化。

由于我的基本上是50像素，我会创build一个50px高的间隔，没有边距或填充;

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

Answer 4

对于版本3来说，似乎并没有“自助式”的方式来实现这一点。

一个panel ，一个well和一个form-group都提供了一些垂直间距。

显然，一个更正式的特定垂直间距解决scheme是在bootstrap v4的路线图上

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

Answer 5

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

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

Answer 6

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

引用所用符号的文档 ：

适用于从xs到xl所有断点的间隔工具在它们中没有断点缩写。 这是因为这些类是从min-width: 0开始应用的，因此不受媒体查询的限制。 然而，其余的断点包含断点缩写。

对于sm ， md ， lg和xl ，这些类使用xs和{property}{sides}-{breakpoint}-{size} {property}{sides}-{size}格式进行命名。

如果财产是以下之一：

• m – 用于设定margin类别
• p – 用于设置padding类

哪边是以下之一：

• t – 用于设置margin-top或padding-top
• b – 用于设置页margin-bottom或margin-bottom padding-bottom
• l – 用于设置margin-left或padding-left
• r – 用于设置margin-right或padding-right
• x – 用于设置*-left和*-right
• y – 用于设置*-top和*-bottom
• 空白 – 用于在元素的所有四边设置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 7

我只是创build了一个使用不同高度的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; 

}

只需创build一个分区类，以满足任何需要的高度。

Answer 8

我尝试使用<div class="control-group">它并没有改变我的布局。 它没有增加垂直空间。 为我工作的解决scheme是：

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

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

Answer 9

我的窍门 不优雅，但它的作品：

 <p>&nbsp;</p> 

Answer 10

我知道这是旧的，有几个很好的解决scheme已经发布，但一个简单的解决scheme，为我工作

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

接着

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

Answer 11

 <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

Answer 12

只要用 我发现自己在这里寻找这个问题的答案，然后觉得有点傻，因为没有考虑用户JayKilleen在评论中提出的使用简单的换行符。

Answer 13

没有比DRY更多的东西了

 .btn { margin-bottom:5px; }