twitter-bootstrap-3 - Twitter Boostrap 3 网格边距

Question

我创建了以下脚手架：

<div class="row">
  <div class="col-md-4">
    first column
  </div>
  <div class="col-md-4">
    second column
  </div>
  <div class="col-md-4">
    third column
  </div>
</div>

每列都有带有 1px 边框的背景。如果应用，我想添加margin-right: 15px到每一列机器人，第三列低于第二行。

如何在列之间设置 15px 空间？

Answer 1

没有直接修改引导 CSS（这可能会导致您以后更新到后续版本时出现问题），我建议您将自己的自定义容器放在列中（例如使用 .foo 类），并使用 css 语句指定您希望它的方式展示。例如

<div class="row">
  <div class="col-md-4">
      <div class="foo">
         first column
      </div>
  </div>
  <div class="col-md-4">
      <div class="foo">
         second column
      </div>
  </div>
  <div class="col-md-4">
      <div class="foo">
         third column
      </div>
  </div>
</div>

使用 CSS；

.foo:not(:last-child) {
    margin-right:15px;
}

示例：http ://cdpn.io/eDBCJ