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

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

演示