html - 如何删除 Bootstrap 中列之间的装订线(间距)？

Question

如何删除列之间的 30px 装订线？但没有设置margin-left:-30px ?

<div class='container'>
  <div class='row'>

    <div class='col-lg-1'></div>
    <div class='col-lg-1'></div>
    <div class='col-lg-1'></div>

  </div>
</div>

Answer 1

2021 年更新
Bootstrap 5 .no-gutters类已替换为 .g-0 .在 .row 上使用它您希望列之间没有间距。
Bootstrap 5 也有 new gutter classes专门设计用于调整整行的装订线。可以对每个断点响应地使用排水沟类(即:gx-sm-4)

使用 g-0无排水沟

使用 g-(1-5)通过间距单位调整水平和垂直间距

使用 gy-*调整垂直排水沟

使用 gx-*调整水平间距

Bootstrap 4 现在包括 .no-gutters您可以添加到 .row 的类.

<div class="row no-gutters">
    <div class="col">x</div>
    <div class="col">x</div>
    <div class="col">x</div>
</div>

Bootstrap 4: http://codeply.com/go/OBW3RK1ErD

Bootstrap 3.4.0+ 排水沟是使用填充创建的，但他们添加了 .row-no-gutters类(class)。见 documentation for Bootstrap 3.4并寻找“删除排水沟”。
您可以使用的 HTML:

<div class="row row-no-gutters">
    <div class="col">x</div>
    <div class="col">x</div>
    <div class="col">x</div>
</div>

Bootstrap 3+，<= 3.3.9 排水沟是使用填充创建的。您还必须调整负边距，以使外列周围的间距不受影响。

.no-gutter {
  margin-right: 0;
  margin-left: 0;
}

.no-gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

只需添加 no-gutter类到 .row .
演示: http://bootply.com/107458