在Bootstrap行中为元素添加左右边距

Question

我有点困惑为什么Bootstrap不会对列应用左右边距，我只想要一个简单的行，其中包含3个具有20像素水平间距的列。如果尝试这样做，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;
}

- Eli Himself

---

你需要考虑到外边距。这个宽度是基于百分比的，不考虑外边距。请看这个示例：https://jsfiddle.net/30tyx5t7/ - ACruz

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>

- Dominofoe

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

- user3589620

Answer 3

Bootstrap在新行中插入一个元素，因为它的列布局最多只有12列。

当你有3个div * (4列宽度+右边距)时，你超出了提供的12列。

你可以将你的div设置得稍微窄一些，比如3个中等大小的Bootstrap列，像这样：

 <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

- Kristijan Iliev