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。

有关详细信息，请参阅How to adjust gutter in Bootstrap 3 grid system?。

Answer 2

在框类中应用width:calc(33.33% - 10px);。

Answer 3

更改每个：

class="col-xs-4 box"

到

class="col-xs-3 box"

您可以在http://jsfiddle.net/nH5WP/8/

中看到它

Bootstrap网格边距

3 个答案: