logo标签列表

使用Twitter Bootstrap如何添加垂直间距？

twitter-bootstrapwhitespacevertical-alignmenttwitter-bootstrap-2
168

如何使用Twitter的Bootstrap添加垂直空白间隔？

例如，假设我正在创建一个落地页，并希望在某个按钮上方和下方留出一些（100px）空白。显然，我可以为该特定按钮创建一个类。但是，我认为Bootstrap应该有一种DRY方法来添加垂直空白间隔。

13个回答
52

在v2版本中，没有内置任何用于大量垂直空间的内容，所以您需要使用自定义类。对于较小的高度，我通常只需在按钮周围添加一个<div class="control-group">即可。

9
或者 <div class="btn-toolbar"> - dyurkavets
10
谢谢。我现在已经为此创建了一些spacer10、spacer50等类。我注意到Github上已经有一个关于这个功能的请求：http://bit.ly/R9oap9 - Ryan
1
@Ryan：不错，我没看到这个拉取请求。我有点矛盾。Bootstrap几乎完全是表现层的（而且很方便），但如果你足够努力地闭上眼睛忽略所有额外的HTML，你可以从中推导出语义。垂直间距纯粹是表现层的，所以我认为最好使用自定义类/ID 来完成它。 - jmdeldin
2
这是针对v2的，但似乎v3已经最小化了.btn-toolbar周围的间距，因此您应该添加一个新类并设置自己的边距。 - jmdeldin
3
看起来 Github 的功能请求已被关闭，该功能可能会出现在 Bootstrap v4 中。 bit.ly/R9oap9 - Ryan
显示剩余7条评论
50

包装文本可以实现此目的，但如果您只需要一个空格，我会选择：

<div class="col-xs-12" style="height:50px;"></div>
16
在使用Bootstrap时添加内联样式通常不是一个好主意，至少应该放入CSS中。 - alexykot
2
请注意，“col-xs-12”与没有类别完全相同。 - Soldeplata Saketos
不是一个好主意。"如何使用Twitter的Bootstrap添加垂直空白的最佳方法"......相反，定义自定义类会更好地避免内联样式。 - Capuchin
44
在Bootstrap 4/5中有间距工具（BS4, BS5）。
来自文档的摘录：
适用于所有断点的间距工具类，从 xs 到 xl，它们中没有断点缩写。这是因为这些类是从 min-width: 0 开始应用的，因此不受媒体查询的限制。然而，其余的断点确实包括断点缩写。
这些类的命名格式为 {property}{sides}-{size}（对于 xs），以及 {property}{sides}-{breakpoint}-{size}（对于 sm、md、lg 和 xl）。
其中，property 是以下之一：
  • m - 用于设置 margin 的类
  • p - 用于设置 padding 的类
其中，sides 是以下之一（请注意 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 的类
  • 空白 - 用于在元素的四个边上设置 margin 或 padding 的类
其中，size 是以下之一：
  • 0 - 用于通过将其设置为 0 来消除 margin 或 padding 的类
  • 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类。

3
可以举一个有效的类字符串的例子吗？ - Kellen Stuart
38

很抱歉在这里挖掘旧坟墓，但为什么不直接这样做呢？

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

这将会增加一个普通表单元素高度的空间。

在水平表单中，标签位于左侧2列，输入框位于右侧10列时，在一个表单元素中大约有1行高度相当于50像素（我刚刚检查的元素为47像素）。因此，您的像素可能会有所不同。

由于我的元素基本上是50像素，所以我会创建一个高度为50像素且没有边距或填充的间隔元素；

.spacer { margin:0; padding:0; height:50px; }
<div class="spacer"></div>
1
这会在组下方添加空间，但不会在上方添加。 - icc97
当然可以，这正是他要求的，一种添加垂直空白间距的方法。如果您需要自定义form-group、row甚至button，可以创建自己的类并添加到其中，覆盖边距。例如：class="form-group spaced-group" 和 ".spaced-group { margin-top: 15px !important; margin-bottom: 15px !important; }。这只是常见的CSS技巧。 - Wade
OP特别要求：“在某个按钮上方和下方留出一点（100像素）的空白白色空间”。 - icc97
1
不，那只是一个例子，不是他的问题。他的问题是“使用Twitter的Bootstrap添加垂直空白间隔的最佳方法是什么？”- 垂直空白间隔与特定元素的边距不同。如果他要为所有按钮执行此操作，可以更改btn的边距或创建自己的类似于“btn-spaced”的类，并设置所需的边距。如果他只想在任何地方添加间隙，那么像我回答的固定高度的间隔器就是他需要的。他问了一个问题，并举了另一个例子。我假设他足够了解CSS，知道他可以覆盖边距。 - Wade
由于他提到了DRY方法和按钮，那么我会创建一个带有所需边距的按钮类：btn-spaced。如果不仅针对按钮，还想应用于行、表单组等一般边距，则可以使用class="row space-small"或class="form-group space-medium"这样的通用类。其中，small、medium和large只是边距的变形，几乎可以应用于任何元素，很难确定操作者想要什么。是仅限于按钮还是适用于任何元素。 - Wade
抱歉，我的错，我没有意识到你的意思是要添加整个 HTML 块。我误解了你的建议，认为你只是建议在需要间距的任何元素周围使用 form-group 类。但是你所建议的是在上下分别放置这个 div 元素来创建空间。 - icc97
24

我知道这是旧的，但我来到这里寻找同样的事情，我发现Bootstrap有一个help-block，对于这种情况非常方便：

<div class="help-block"></div>
21
6
如果你只想添加一些间距，而css属性仅限于margin-bottom:15px，那么.form-group似乎是最好的选择。如果你想使用.well和.panel来添加间距，则不应该使用它们，因为它们还有其他的属性（如背景、内边距、边框等）。 - xaa
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;
}

只需为所需高度创建一个分隔符类。
8

我的技巧。不够优雅，但它有效：

<p>&nbsp;</p>
2
@JayKilleen +1 你应该把这个发表为答案。也许人们变得太依赖框架，开始忘记基础了。 - ADJenks
5
只需使用<br/>标签。我在这里寻找答案，然后感到有些傻，因为我没有像用户JayKilleen在评论中建议的那样考虑使用简单的换行符。
缺点是您无法获得精确的 100px 控制，但它应该能够添加合理数量的空间。 - mix3d
1
@mix3d，你说得对，我一开始没有注意到他关心它是否恰好为100像素。我以为他只是想要一个“点”。他肯定可以像其他人建议的那样制作自己的帮助类。但由于这篇文章已经很多年了，他现在可以升级到Bootstrap 4以获得精确的间距，或者从中获取帮助类。 - ADJenks
5

我知道这已经过时了，已经有几个好的解决方案了，但对我有效的简单解决方案如下CSS：

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

在HTML中创建一个div。
<div class="divider"></div>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接