twitter-bootstrap - 使用 Twitter Bootstrap 添加垂直空格？

Question

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

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

score 52 · Accepted Answer

在 v2 中，没有针对这么多垂直空间的任何内置功能，因此您需要坚持使用自定义类。对于较小的高度，我通常只<div class="control-group">在一个按钮周围扔一个。

score 50 · Accepted Answer

包装工作，但当你只想要一个空间时，我喜欢：

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

score 42 · Accepted Answer

在Bootstrap 4/5中有间距实用程序（BS4，BS5）。

文档摘录：

适用于所有断点的间距实用程序 from xstoxl中没有断点缩写。这是因为这些类是自上而下应用的min-width: 0，因此不受媒体查询的约束。但是，其余断点确实包含断点缩写。

{property}{sides}-{size}这些类使用forxs 和{property}{sides}-{breakpoint}-{size}for sm、md、lg和的格式命名xl。

财产是以下之一：

m- 对于设置的类margin

p- 对于设置的类padding

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

t- 对于设置margin-top或padding-top

b- 对于设置margin-bottom或padding-bottom

l- 对于设置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和*-right

y- 对于同时设置*-top和*-bottom

空白 - 对于在元素的所有 4 个边上设置 amargin或的类padding

其中size是以下之一：

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

1- （默认情况下）用于设置marginorpadding的类$spacer * .25

2- （默认情况下）用于设置marginorpadding的类$spacer * .5

3- （默认情况下）用于设置marginorpadding的类$spacer

4- （默认情况下）用于设置marginorpadding的类$spacer * 1.5

5- （默认情况下）用于设置marginorpadding的类$spacer * 3

因此，要在元素上方和下方有一些额外的垂直空间，您将使用my-5class.

score 36 · Accepted Answer

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

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

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

似乎表单上的 1 行大约是 50 像素（我刚刚检查的元素上是 47 像素）。这是一个横向的表格，左边 2col 有标签，右边 10col 有输入。所以你的像素可能会有所不同。

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

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

score 24 · Accepted Answer

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

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

score 21 · Accepted Answer

对于版本 3，似乎没有“引导”方式来巧妙地实现这一目标。

A panel， awell和 aform-group都提供了一些垂直间距。

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

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

score 9 · Accepted Answer

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

只需为需要的高度创建一个分隔器类。

score 8 · Accepted Answer

8

我的把戏。不优雅，但它有效：

<p>&nbsp;</p>

于 2017-02-04T03:17:57.633 回答

score 5 · Accepted Answer

我知道这很旧，并且已经发布了几个很好的解决方案，但是一个对我有用的简单解决方案是以下 CSS

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

然后在你的 html 中创建一个 div

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

score 5 · Accepted Answer

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

score 4 · Accepted Answer

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

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

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

score 1 · Accepted Answer

<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

score -3 · Accepted Answer

-3

没有什么比 DRY 更干燥了

.btn {
    margin-bottom:5px;
}

于 2014-09-18T10:19:39.787 回答

twitter-bootstrap - 使用 Twitter Bootstrap 添加垂直空格？

13 回答 13

Related

Reference