向twitter引导添加一个简单的间隔

Question

我使用的是推特引导，使用更少和Rails。

我想在我的CSS中添加一个简单的间隔，它出现在网格行之间，以便更好地分隔东西。我在引导程序中找不到任何可以为我做这件事的东西，所以我想我可以添加一个定义了边距顶部的间隔div。

我在引导覆盖文件中获取了以下代码：

 .spacer {  margin-top: 40px; }

但是所有的边距似乎都聚集在页面的顶部，而不是网格之间。我肯定这是我遗漏的位置属性，请帮助。

我愿意接受任何其他关于更好的方法来实现这一点的建议，或者如果t-bootstrap已经有任何我错过的东西。

谢谢

Answer 1

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

<p>&nbsp;</p>

Answer 2

在Bootstrap 4中，您可以使用诸如mt-5、mb-5、my-5、mx-5（y表示顶部和底部，x表示左侧和右侧）之类的类。

根据他们的网站：

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

链接：https://getbootstrap.com/docs/4.0/utilities/spacing/

Answer 3

您可以将类添加到每个。rowdivs在它们之间添加一些空格，如下所示：

.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>