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添加到每个列机器人（如果应用），第三列降低到第二个`row`。

如何在列之间设置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

Twitter Bootstrap 3网格边距

1 个答案: