引导程序删除列之间的装订线(间距)

本文介绍了引导程序删除列之间的装订线(间距)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

如何删除列之间的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