Twitter bootstrap 使用Twitter引导添加垂直空白？

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

---

例如，假设我正在创建一个登录页，并且希望在某个按钮的上方和下方有一点空白（100px）。显然，我可以为这个按钮创建一个特定的类。但是，我认为引导应该有一种添加垂直空格的方法。

在v2中，没有任何内置的东西可以容纳这么多的垂直空格，所以您需要使用自定义类。对于较小的高度，我通常只是在按钮周围扔一个

。

没有什么比这更干燥的了

.btn {
    margin-bottom:5px;
}

我尝试使用

，但它没有改变我的布局。它没有增加垂直空间。对我有效的解决方案是：

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

---

如果这并没有给你足够的垂直空间，你可以通过添加嵌套的

标签来获得更多的垂直空间。
对于版本3，似乎没有“引导”方式来实现这一点

面板
，
井
和
表格组
都提供了一些垂直间距

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


包装很有效，但当您只需要一个空间时，我喜欢：

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

很抱歉在这里挖了一个旧坟墓，但为什么不这么做呢

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



它将添加一个与标准表单元素高度相同的空间

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

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

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

.spacer{边距：0；填充：0；高度：50px；}
我知道这很旧，但我来这里是为了寻找同样的东西，我发现Bootstrap有帮助块，在这些情况下非常方便：

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



按钮

我只是使用不同的高度创建了一个div类，即

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

只需为需要的高度创建一个分隔器类。
在Bootstrap 4/5中有间距实用程序（，）

文件摘录：

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

这些类是使用
xs的
{property}{sides}-{size}
格式命名的
和
{property}{sides}-{breakpoint}-{size}
用于
sm
、
md
、
lg
和
xl

如果财产是下列财产之一：


m
-用于设置
边距的类

p
-用于设置
填充的类


其中边是其中之一（请注意BS4和BS5中的差异）：


t
-用于设置
边距顶部
或
填充顶部
b
-用于设置
边距底部
或
填充底部
l
-用于设置
左边距
或
左边距
（引导4）
s
-用于设置
左边距
或
左边距
（引导程序5）
r
-用于设置
右边距
或
右边距
（引导程序4）
e
-用于设置
右边距
或
右边距
（引导程序5）
x
-用于同时设置
*-left
和
*-right
y
-用于同时设置
*-top
和
*-bottom
空白-用于在元素的所有4个边上设置
边距
或
填充
的类

其中，尺寸为以下值之一：


0
-用于通过将其设置为
0来消除边距或填充的类

1
-（默认情况下）用于将
边距
或
填充
设置为
$spacer*.25
2
-（默认情况下）用于将
边距
或
填充
设置为
$spacer*.5
3
-（默认情况下）用于将
边距
或
填充
设置为
$spacer
4
-（默认情况下）用于将
边距
或
填充
设置为
$spacer*1.5
5
-（默认情况下）用于将
边距
或
填充
设置为
$spacer*3


因此，要在元素上下留出额外的垂直空间，可以使用my-5
类。
我的技巧。不优雅，但它可以工作：

<p>&nbsp;</p>


我知道这是一个很老的解决方案，并且已经发布了一些很好的解决方案，但是一个对我有效的简单解决方案是下面的CSS

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


.分隔器{
边距：0厘米0厘米.5厘米0厘米；
}

然后在html中创建一个div

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


只需使用

。我发现自己在这里寻找这个问题的答案，然后觉得有点傻，因为没有考虑使用用户JayKilleen在评论中建议的简单换行符。
或谢谢。我现在已经为这个用途创建了一些spacer10、spacer50等类。我看到github中已经有一个功能请求：@Ryan:Nice，没有看到拉取请求。我对此有点矛盾。Bootstrap几乎完全是一种表象（而且很方便），但是如果你眯着眼睛，努力忽略所有额外的HTM
<style>
  .divider{
    margin: 0cm 0cm .5cm 0cm;
  }
</style>

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