twitter-bootstrap Bootstrap 网格边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24340293/
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
Bootstrap grid margin
提问by ttmt
I have a jsfiddle here: http://jsfiddle.net/nH5WP/
我在这里有一个 jsfiddle：http: //jsfiddle.net/nH5WP/
It's a super simple 3 x 3 grid using Bootstrap 3
这是一个使用 Bootstrap 3 的超级简单的 3 x 3 网格
I want to add margins to the right and bottom of each block.
我想在每个块的右侧和底部添加边距。
The last block in each line is dropping down, I would normally remove the right margin on the last block in each line with something like
每行中的最后一个块正在下降，我通常会删除每行中最后一个块的右边距，例如
.box:last-child{
background: yellow;
margin: 0 0 10px 0;
}
but this doesn't seem to work.
但这似乎不起作用。
How can I add margins between each block in this grid ?
如何在此网格中的每个块之间添加边距？
<div class="container">
<div class="row">
<div class="col-xs-4 box">
<p>One</p>
</div>
<div class="col-xs-4 box">
<p>Two</p>
</div>
<div class="col-xs-4 box">
<p>Three</p>
</div>
</div>
<div class="row">
<div class="col-xs-4 box">
<p>Four</p>
</div>
<div class="col-xs-4 box">
<p>Five</p>
</div>
<div class="col-xs-4 box">
<p>Six</p>
</div>
</div>
<div class="row">
<div class="col-xs-4 box">
<p>Seven</p>
</div>
<div class="col-xs-4 box">
<p>Eight</p>
</div>
<div class="col-xs-4 box">
<p>Nine</p>
</div>
</div>
</div>
回答by Peter Wooster
You can't create a "gutter" in the bootstrap grid system using margin:.
您不能使用margin:.
Bootstrap uses padding to build gutters, so you need to put a wrapper div around your columns and pads that.
Bootstrap 使用填充来构建装订线，因此您需要在列周围放置一个包装 div 并填充它。
See How to adjust gutter in Bootstrap 3 grid system?for more information.
请参阅如何在 Bootstrap 3 网格系统中调整装订线？想要查询更多的信息。
回答by Gus
Apply width:calc(33.33% - 10px);in box class.
申请width:calc(33.33% - 10px);盒子类。
回答by webtroll
Change each:
更改每个：
class="col-xs-4 box"
to
到
class="col-xs-3 box"
You can see it in http://jsfiddle.net/nH5WP/8/
