如何删除列之间的30px装订线?但是没有设置 margin-left:-30px ?
How can I remove the 30px gutter between columns? But without setting 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
引导程序5 已将 .no-gutters 类替换为 .g-0 .在不希望各列之间留有间距的 .row 上使用它.
Bootstrap 5 the .no-gutters class has been replaced with .g-0. Use it on the .row where you want no spacing between columns.
Bootstrap 4 现在包括一个 .no-gutters 类,您可以将其添加到 .row .
Bootstrap 4 now includes a .no-gutters class that you can just add to the .row.
<div class="row no-gutters"> <div class="col">x</div> <div class="col">x</div> <div class="col">x</div> </div>引导程序4: codeply/go/OBW3RK1ErD
Bootstrap 3.4.0 + 是使用填充创建的装订线,但它们添加了 .row-no-gutters 类.请参见有关Bootstrap 3.4的文档,并查找移除装订线".
Bootstrap 3.4.0+ gutters are created using padding, but they added a .row-no-gutters class. See the documentation for Bootstrap 3.4 and look for 'Remove gutters'.
您可以使用的HTML:
HTML you can use:
<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 装订线是使用填充创建的.您还必须调整负边距,以使外列之间的间距不受影响.
Bootstrap 3+, <= 3.3.9 gutters are created using padding. You also must adjust the negative margin so that spacing around the outer columns is not affected.
.no-gutter { margin-right: 0; margin-left: 0; } .no-gutter > [class*="col-"] { padding-right: 0; padding-left: 0; }只需将 no-gutter 类添加到 .row .
演示: bootply/107458
更多推荐
引导程序删除列之间的装订线(间距)
发布评论