40

我正在使用带有 LESS 和 Rails 的 twitter-bootstrap。

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

我在我的引导覆盖文件中采用了以下代码：

 .spacer {  margin-top: 40px; }

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

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

谢谢！

4

3 回答 3

83

您可以为每个.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>
于 2012-05-21T19:43:02.983 回答
11

在 Bootstrap 4 中，您可以使用mt-5, mb-5, my-5,等类mx-5（y 表示顶部和底部，x 表示左右）。

根据他们的网站：

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

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

于 2015-11-20T10:34:09.873 回答
3

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

<p>&nbsp;</p>
于 2017-02-04T03:16:10.733 回答