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-*仍然保持相同的样式，在考虑响应性时也更加简单，特别是在移动尺寸下堆叠（尝试我的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 装订线。您还必须调整负边距，以便不影响外柱周围的间距。

.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

---

Answer 3

我建议您从Customizer生成自己定制的Bootstrap版本，而不是应用难以维护的修补程序，您可以将装订线设置为您想要的尺寸（或者将其完全删除，方法是将其设置为0 ）。

Answer 4

Bootstrap 3在v3.4.0中引入了.row-no-gutters class，其功能与广告宣传完全相同。

要删除行及其列中的装订线，只需将此类添加到<div>。

Answer 5

更改按钮链接样式。

<... class =“ bth btn-link noMarginPaddingBorder” ...>

.noMarginPaddingBorder{
    margin:0 !important; 
    padding:0 !important;
    border: 0 !important;
}