Question

我有点困惑为什么bootstrap不会将左右边距应用于列，我想要的只是一个简单的行，其中3列在彼此之间具有20px的水平边距。如果尝试做那个bootstrap，只需将其中一个div剪辑到下一行。

HTML

<div class="container">

  <div class="row">

    <div class="col-md-4"><p>Box 1</p></div>
    <div class="col-md-4"><p>Box 1</p></div>
    <div class="col-md-4"><p>Box 1</p></div>

  </div>

</div>

CSS

.col-md-4 {
  background-color: tomato;
  margin: 20px 5px;
}

Answer 1

你可以做多一点间距：

<div class="col-md-3 col-md-offset-1"><p>Box 1</p></div>
<div class="col-md-3 col-md-offset-1"><p>Box 1</p></div>
<div class="col-md-3 col-md-offset-1"><p>Box 1</p></div>

Answer 2

列的左右边距会破坏Bootstrap的网格行为。不要修改Bootstrap的类。添加您的自己的类。

在您的示例中，在列中添加了额外的<div> 。并给它一个保证金。

<强> HTML

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="spacer">
                <p>Box 1</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="spacer">
                <p>Box 1</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="spacer">
                <p>Box 1</p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <div class="spacer">
                <p>Box 1</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="spacer">
                <p>Box 1</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="spacer">
                <p>Box 1</p>
            </div>
        </div>
    </div>
</div>

<强> CSS

.spacer {
    background-color: tomato;
    margin: 20px 5px;
}

Demo

Answer 3

请改为尝试：

.col-md-4 {
  background-color: tomato;
  margin: 20px 5px !important;
}

Answer 4

Bootstrap在新行中滑动一个，因为它的列布局最多为12列

如果你有 3 div *（4 col宽+ margin-right），你提供的12列超出了。

您可以将div设置得更薄一些，即3个中等自举列，如下所示：

 <div class="col-md-3 custom-box"><p>Box 1</p></div>
 <div class="col-md-3 custom-box"><p>Box 1</p></div>
 <div class="col-md-3 custom-box"><p>Box 1</p></div>

并按照以下方式应用您的css规则：

.custom-box{
    margin-right: 20px 5px!important;
    background-color: tomato;
}

这是一个FIDDLE

向引导行中的元素添加左右边距

4 个答案: