如何删除列之间的 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>
最佳答案
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/OBW3RK1ErDBootstrap 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
关于html - 如何删除 Bootstrap 中列之间的装订线(间距)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21254889/