Question

我正在使用twitter-bootstrap，使用LESS和Rails。

我想在我的CSS中添加一个简单的间隔符，它出现在网格行之间，以便更好地分隔。我在引导程序中找不到任何能为我做的事情所以我想我可以添加一个带有margin-top定义的spacer div。

我在我的bootstrap覆盖文件中使用了以下代码：

 .spacer {  margin-top: 40px; }

但所有边距似乎都聚集在页面顶部而不是网格之间。我确定它的位置属性我在某处失踪，请帮助。

我对任何其他有关实现此目标的更好方法的建议持开放态度，或者如果t-bootstrap有任何我已经错过的东西。

谢谢！

Answer 1

您可以为每个.row div添加一个类，以便在它们之间添加一些空格，如下所示：

.spacer {
    margin-top: 40px; /* define margin as you see fit */
}

然后您可以这样使用它：

<div class="row spacer">
   <div class="span4">...</div>
   <div class="span4">...</div>
   <div class="span4">...</div>
</div>

<div class="row spacer">
   <div class="span4">...</div>
   <div class="span4">...</div>
   <div class="span4">...</div>
</div>

Answer 2

在Bootstrap 4中（虽然它仍然是alpha版），您可以使用mt-5，mb-5等类。

根据他们的网站：

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

链接：https://v4-alpha.getbootstrap.com/utilities/spacing/

Answer 3

我的方法。棘手，但对我来说效果很好

<p>&nbsp;</p>

在twitter bootstrap中添加一个简单的spacer

3 个答案: