css - Bootstrap 3 向网格系统添加间距

Question

我显然在这里遗漏了一些非常明显的东西，但我想要在 Bootstrap 列之间有一个 10px 的间距。来自默认情况下有排水沟的 ui-kit，要关闭它们，您只需添加 uk-grid-collapse 类即可。

打开装订线的 Bootstrap 等效项是什么？

http://codepen.io/anon/pen/vKBjBa

<div class="row">
    <div class="col-lg-4 col-md-4 col-sm-12 col1">
        <div class="div-content">col 1</div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-6 col2">
        <div class="div-content">col 2</div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-6 col3">
        <div class="div-content">col 3</div>
    </div>
</div>

Answer 1

只需定义内部 div 的颜色即可。在这里，我从 parent 那里删除了类(class)，并将类(class)传递给了 child 的div

<div class="row">
  <div class="col-lg-4 col-md-4 col-sm-12">
    <div class="div-content col1">col 1</div>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-6">
    <div class="div-content col2">col 2</div>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-6">
    <div class="div-content col3">col 3</div>
  </div>
</div>

因为 bootstrap 在 col- 类中有一个默认的装订线空间，所以使用它们并为内部 div 定义 background-color 。

The default gutter space is 15px from each side left and right so you will see the default space of 30px between the div's. If you want to change that space to 10px just write you own css with desired space and overwrite it.