Bootstrap中的间距内容

时间:2016-11-12 17:19:26

标签: css twitter-bootstrap

过去几周我一直在使用Bootstrap,我喜欢网格系统和HTML5数据属性的有趣用法,但我似乎无法理解的一件事就是间距。

我可以一个接一个地创建row,或者甚至只创建容器,并且尽管每个列(col-md-*)之间都有明显的排水沟,但是没有任何内容可以垂直放置。

在我最近的项目中,我创建了一些分隔符类,只是为了在我的一些容器之间添加一些垂直边距 - 但这感觉多余。

你应该如何恰当地间隔你的内容?

1 个答案:

答案 0 :(得分:0)

看来,Bootstrap中没有特殊的类。但我认为,它是好的。

Bootstrap无法始终“知道”,您需要多少空间。你必须自己创建它。这就是你是开发人员的原因:))

请看这些解决方案:Add vertical blank space using twitter bootstrap

1)使用bootstrap内置类form-group

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

2)或在您需要的每一行之后添加额外的块:

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

3)或者创建一个新类,并在每个row之后添加额外的块:

CSS:

.spacer { margin:0; padding:0; height:50px; }

HTML:

<div class="spacer"></div>

4)或者,如果您确实需要每个行元素之后的空格,请为row类添加其他样式:

.row { padding-bottom: 50px }

示例:https://jsfiddle.net/3a36p06h/