使用 Twitter 的 Bootstrap 添加垂直空白的最佳方法是什么？
例如，假设我正在创建一个登录页面，并且希望在某个按钮的上方和下方有一点（100 像素）空白。显然，我可以为那个特定的按钮创建一个特定的类。但是，我认为 Bootstrap 应该有一种添加垂直空格的DRY方式。
问问题
213935 次
13 回答
52
在 v2 中，没有针对这么多垂直空间的任何内置功能，因此您需要坚持使用自定义类。对于较小的高度，我通常只<div class="control-group">在一个按钮周围扔一个。
于 2012-09-05T02:07:28.760 回答
50
包装工作，但当你只想要一个空间时，我喜欢：
<div class="col-xs-12" style="height:50px;"></div>
于 2015-06-03T23:53:20.703 回答
42
在Bootstrap 4/5中有间距实用程序（BS4，BS5）。
文档摘录：
适用于所有断点的间距实用程序 from
xstoxl中没有断点缩写。这是因为这些类是自上而下应用的min-width: 0，因此不受媒体查询的约束。但是，其余断点确实包含断点缩写。
{property}{sides}-{size}这些类使用forxs和{property}{sides}-{breakpoint}-{size}forsm、md、lg和的格式命名xl。财产是以下之一：
m- 对于设置的类marginp- 对于设置的类padding其中边是其中之一（请注意 BS4 和 BS5 的差异）：
t- 对于设置margin-top或padding-topb- 对于设置margin-bottom或padding-bottoml- 对于设置margin-left或padding-left(Bootstrap 4)的类s- 对于设置margin-left或padding-left(Bootstrap 5)的类r- 对于设置margin-right或padding-right(Bootstrap 4)的类e- 对于设置margin-right或padding-right(Bootstrap 5)的类x- 对于同时设置*-left和*-righty- 对于同时设置*-top和*-bottom- 空白 - 对于在元素的所有 4 个边上设置 a
margin或的类padding其中size是以下之一：
0- 对于通过将其设置为来消除边距或填充的类01- （默认情况下）用于设置marginorpadding的类$spacer * .252- （默认情况下）用于设置marginorpadding的类$spacer * .53- （默认情况下）用于设置marginorpadding的类$spacer4- （默认情况下）用于设置marginorpadding的类$spacer * 1.55- （默认情况下）用于设置marginorpadding的类$spacer * 3
因此，要在元素上方和下方有一些额外的垂直空间，您将使用my-5class.
于 2017-01-26T21:21:36.240 回答
36
抱歉在这里挖了一个旧坟墓，但为什么不这样做呢？
<div class="form-group">
</div>
它将添加一个正常表单元素高度的空间。
似乎表单上的 1 行大约是 50 像素（我刚刚检查的元素上是 47 像素）。这是一个横向的表格，左边 2col 有标签，右边 10col 有输入。所以你的像素可能会有所不同。
因为我的基本上是 50 像素，我会创建一个 50 像素高的间隔，没有边距或填充；
.spacer { margin:0; padding:0; height:50px; }
<div class="spacer"></div>
于 2015-08-06T00:27:17.340 回答
24
我知道这是旧的，但我来到这里寻找同样的东西，我发现 Bootstrap 有帮助块，在这些情况下非常方便：
<div class="help-block"></div>
于 2015-11-16T18:12:04.853 回答
21
对于版本 3，似乎没有“引导”方式来巧妙地实现这一目标。
A panel， awell和 aform-group都提供了一些垂直间距。
显然，更正式的特定垂直间距解决方案在 bootstrap v4 的路线图上
https://github.com/twbs/bootstrap/issues/4286#issuecomment-36331550 https://github.com/twbs/bootstrap/issues/13532
于 2015-02-18T13:30:31.237 回答
9
我只是使用不同的高度创建了一个 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;
}
只需为需要的高度创建一个分隔器类。
于 2016-11-24T02:04:40.460 回答
8
我的把戏。不优雅，但它有效：
<p> </p>
于 2017-02-04T03:17:57.633 回答
5
我知道这很旧，并且已经发布了几个很好的解决方案，但是一个对我有用的简单解决方案是以下 CSS
<style>
.divider{
margin: 0cm 0cm .5cm 0cm;
}
</style>
然后在你的 html 中创建一个 div
<div class="divider"></div>
于 2017-03-02T19:52:55.050 回答
5
只需使用<br/>. 我发现自己在这里寻找这个问题的答案，然后觉得有点愚蠢，因为没有考虑使用用户 JayKilleen 在评论中建议的简单换行符。
于 2017-08-08T19:14:23.033 回答
4
我尝试使用<div class="control-group">它并没有改变我的布局。它没有增加垂直空间。对我有用的解决方案是：
<ol style="visibility:hidden;"></ol>
如果这不能为您提供足够的垂直空间，您可以通过添加嵌套<li> </li>标签逐步获得更多空间。
于 2015-01-16T19:12:39.747 回答
1
<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
于 2016-05-13T11:41:44.000 回答
-3
没有什么比 DRY 更干燥了
.btn {
margin-bottom:5px;
}
于 2014-09-18T10:19:39.787 回答