Bootstrap网格边距

Question

我在这里有一个jsfiddle:http://jsfiddle.net/nH5WP/

这是一个使用Bootstrap 3的超简单3 x 3网格

我想在每个块的右边和底部添加边距.

每行中的最后一个块都在下降,我通常会删除每行中最后一个块的右边距

.box:last-child{
  background: yellow;
  margin: 0 0 10px 0;
}

但这似乎不起作用.

如何在此网格中的每个块之间添加边距？

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

Answer 1

您无法在引导网格系统中使用创建"装订线" margin:.

Bootstrap使用填充来构建排水沟,因此您需要在您的柱子和垫子周围放置一个包装div.

请参阅如何在Bootstrap 3网格系统中调整装订线？欲获得更多信息.