使用 Bootstrap 添加垂直空白？

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

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

216411 次浏览
小开

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

小开

没有什么比

.btn {
margin-bottom:5px;
}
小开

我尝试使用 <div class="control-group">，它没有改变我的布局。它没有增加垂直空间。对我有效的解决办法是:

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

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

小开

对于版本3来说，似乎没有“引导”方式可以灵活地实现这一点。

panel、 well和 form-group都提供一些垂直间距。

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

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

小开

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

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

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

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

它将添加一个与普通窗体元素高度相同的空格。

看起来一个表单上的1行大约是50px (我刚刚检查的元素上是47px)。这是一个水平的表单，标签在左边的2coll 上，输入在右边的10coll 上。所以你的像素可能会有所不同。

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

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

我知道这很古老，但是我来这里寻找同样的东西，我发现 Bootstrap 有 help-block，非常适合这些情况:

<div class="help-block"></div>
小开 
<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

小开

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

只需创建一个分隔类，以满足任何需要的高度。

小开
最佳答案

在 自助4/5有间隔实用程序(BS4，BS5)。

文件节录如下:

应用于所有断点(从 xs到 xl)的间距实用程序, 没有断点缩写。这是因为这些类 从 min-width: 0及以上应用，因此不受 但是，其余的断点包括一个 断点缩写断点缩写。

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

其中 财产是:

  • 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个边上设置 margin或 padding的类

其中 尺寸是:

  • 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类。

小开

我的把戏，虽然不够优雅，但很管用:

<p>&nbsp;</p>
小开

我知道这是旧的，有几个很好的解决方案已经张贴，但一个简单的解决方案，我的工作是以下 CSS

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

然后在 html 中创建一个 div

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

用 <br/>。我发现自己在这里寻找这个问题的答案，然后觉得有点傻，没有想到用户 JayKilleen 在评论中建议使用一个简单的换行符。


提交答案