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

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

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

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

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

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

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

 <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> 

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

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

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

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

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

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

Bootstrap 4中有间隔实用程序 。

引用所用符号的文档 :

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

对于smmdlgxl ,这些类使用xs{property}{sides}-{breakpoint}-{size} {property}{sides}-{size}格式进行命名。

如果财产是以下之一:

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

哪边是以下之一:

  • t – 用于设置margin-toppadding-top
  • b – 用于设置页margin-bottommargin-bottom padding-bottom
  • l – 用于设置margin-leftpadding-left
  • r – 用于设置margin-rightpadding-right
  • x – 用于设置*-left*-right
  • y – 用于设置*-top*-bottom
  • 空白 – 用于在元素的所有四边设置marginpadding

哪里大小是以下之一:

  • 0 – 通过设置为0来消除边距或填充的类
  • 1 – (默认情况下)将marginpadding设置为$spacer * .25
  • 2 – (默认情况下)将marginpadding设置为$spacer * .5
  • 3 – (默认情况下)将marginpadding设置为$spacer
  • 4 – (默认情况下)将marginpadding设置为$spacer * 1.5
  • 5 – (默认情况下)将marginpadding设置为$spacer * 3

所以要在元素的上下有一些额外的垂直空间,你可以使用my-5类。

我只是创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一个分区类,以满足任何需要的高度。

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

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

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

我的窍门 不优雅,但它的作品:

 <p>&nbsp;</p> 

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

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

接着

 <div class="divider"></div> 
 <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

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

没有比DRY更多的东西了

 .btn { margin-bottom:5px; }