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

Question

我正在使用twitter-bootstrap,使用LESS和Rails.

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

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

 .spacer {  margin-top: 40px; }

但是所有边缘似乎都聚集在页面的顶部而不是网格之间.我确定它的某个位置属性我在某个地方缺少请帮忙.

我对任何其他建议采取更好的方法来实现这一目标,或者如果t-bootstrap有任何我已经错过的东西.

谢谢!

Answer 1

您可以为每个.rowdiv 添加一个类,以便在它们之间添加一些空格,如下所示:

.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

在引导4(它仍然阿尔法虽然)你可以使用类,比如mt-5,mb-5.

根据他们的网站:

对于xs和{property} {sides} - {breakpoint} - {size},对于sm,md,lg和xl,使用格式{property} {sides} - {size}来命名类.

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