CSS 向 twitter bootstrap 添加一个简单的间隔器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10691442/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding a simple spacer to twitter bootstrap
提问by Adam
I'm using twitter-bootstrap, with LESS and Rails.
我正在使用带有 LESS 和 Rails 的 twitter-bootstrap。
I want to add a simple spacer to my CSS that appears between the grid rows to space things out a bit better. I couldn't find anything in the bootstrap that does it for me so I figured I could just add a spacer div with a margin-top defined.
我想在我的 CSS 中添加一个简单的间隔器，它会出现在网格行之间，以更好地将事物隔开。我在引导程序中找不到任何对我有用的东西，所以我想我可以添加一个定义了边距顶部的间隔 div。
I took the following code in my bootstrap override file:
我在引导程序覆盖文件中使用了以下代码：
.spacer { margin-top: 40px; }
but all the margins seem to bunch together at the top of the page and not between the grid. I'm sure its a position attribute I'm missing somewhere please help.
但是所有的边距似乎都聚集在页面顶部而不是网格之间。我确定它是我在某处丢失的位置属性，请帮忙。
I'm open to any other suggestions on a better way to achieve this, or if t-bootstrap has anything already that I have missed.
我愿意接受关于更好的方法来实现这一目标的任何其他建议，或者如果 t-bootstrap 已经有任何我错过的东西。
Thanks!
谢谢！
回答by Andres Ilich
You can add a class to each of your .rowdivs to add some space in between them like so:
您可以为每个.rowdiv添加一个类，以在它们之间添加一些空间，如下所示：
.spacer {
margin-top: 40px; /* define margin as you see fit */
}
You can then use it like so:
然后你可以像这样使用它：
<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>
回答by Marek Naskret
In Bootstrap 4 you can use classes like mt-5, mb-5, my-5, mx-5(y for both top and bottom, x for both left and right).
在 Bootstrap 4 中，您可以使用mt-5, mb-5, my-5, mx-5（y 表示顶部和底部，x 表示左侧和右侧）。
According to their site:
根据他们的网站：
The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.
类使用格式 {property}{sides}-{size} 命名为 xs，{property}{sides}-{breakpoint}-{size} 用于 sm、md、lg 和 xl。
回答by asiniy
My approach. Tricky, but works well for me
我的方法。棘手，但对我来说效果很好
<p> </p>
