Bootstrap - 如何删除列之间的装订线

Question

我不知道如何以正确的方式做到这一点,但我怎样才能删除列之间的30px排水沟？但没有边距左:-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

删除列上填充的更好方法是.no-pad向您的类添加一个类.row:

 <div class="row no-pad">

...然后添加这个CSS.

.row.no-pad {
  margin-right:0;
  margin-left:0;
}
.row.no-pad > [class*='col-'] {
  padding-right:0;
  padding-left:0;
}

寻找first-和last-child物品是一个坏主意,因为它实际上.row是为了处理视口右侧和左侧的偏移.使用上述方法,所有.col-*s都保持相同的风格,在考虑响应性时也更加简单,特别是在移动尺寸下堆叠(尝试我的演示以下md尺寸).

直接后代CSS选择器>意味着.no-pad将只应用于.row直接子项.col,因此如果您愿意,可以在随后嵌套的列结构上填充(或不填充).

同样使用属性选择器[class*='col-']意味着每列不需要添加额外的非Bootstrap类.

这是一个演示:http://www.bootply.com/Ae3xTyAW5D

Answer 2

更新2018年

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://www.codeply.com/go/OBW3RK1ErD

使用填充创建Bootstrap 3排水沟.您还必须调整负边距,以便不影响外柱周围的间距.

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

只需将.row-no-gutters类添加到no-gutter.

演示:http://bootply.com/107458