Question

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

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

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 中有spacing utilites。

引用the documentation for used notation：

适用于所有断点的间距实用程序，从xs到xl，   它们中没有断点缩写。这是因为那些课程   从min-width: 0及以上应用，因此不受a的约束   媒体查询。然而，其余的断点确实包括a   断点缩写。

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

其中属性是以下之一：


m - 适用于设置margin
的课程
p - 适用于设置padding
的课程

其中 sides 是以下之一：


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


其中 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类。

Answer 5

我知道这已经过时了，但我来到这里寻找同样的事情，我发现Bootstrap有帮助块，非常方便这些情况：

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

Answer 6

对于版本3，似乎没有＆＃34; bootstrap＆＃34;这样做的方法很整齐。

panel，well和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

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

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

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

Answer 10

只需使用<br/>即可。我发现自己在这里寻找这个问题的答案然后觉得有点愚蠢，因为没有考虑使用用户JayKilleen在评论中建议的简单换行符。

Answer 11

我知道这已经过时了，已经发布了几个很好的解决方案，但是一个适合我的简单解决方案

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

然后

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

Answer 12

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

没有什么比

更干

.btn {
    margin-bottom:5px;
}

使用Twitter Bootstrap添加垂直空白？

13 个答案: