如何在 Bootstrap 中删除列之间的装订线(间距)?

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

如何移除列之间的 30 像素间距?但是没有设置margin-left:-30px?

<div class='col-lg-1'></div><div class='col-lg-1'></div><div class='col-lg-1'></div>

解决方案

2021 年更新

Bootstrap 5 .no-gutters 类已替换为 .g-0.在 .row 上使用它，您希望列之间没有间距.

Bootstrap 5 还具有 新的装订线类，专门用于调整装订线对于整行.可以为每个断点响应性地使用装订线类(即:gx-sm-4)

• 使用 g-0 没有排水沟
• 使用g-(1-5)调整水平&通过间距单位的垂直排水沟
• 使用gy-*调整垂直间距
• 使用gx-*调整水平间距

Bootstrap 4 现在包含一个 .no-gutters 类，您可以将其添加到 .row 中.

<div class="col">x</div><div class="col">x</div><div class="col">x</div>

引导程序 4:codeply/go/OBW3RK1ErD

Bootstrap 3.4.0+ 装订线是使用填充创建的，但他们添加了一个 .row-no-gutters 类.请参阅Bootstrap 3.4 文档并查找移除装订线".

您可以使用的 HTML:

<div class="col">x</div><div class="col">x</div><div class="col">x</div>

Bootstrap 3+, <= 3.3.9 装订线是使用填充创建的.您还必须调整负边距，以便不影响外列周围的间距.

.no-gutter {右边距:0;左边距:0；}.no-gutter >[class*=col-"] {填充右:0;填充左:0;}

只需将 no-gutter 类添加到 .row 中即可.

演示:bootply/107458

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>

解决方案

Update 2021

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 5 also has new gutter classes that are specifically designed to adjust the gutter for the entire row. The gutters classes can be used responsively for each breakpoint (ie: gx-sm-4)

• use g-0 for no gutters
• use g-(1-5) to adjust horizontal & vertical gutters via spacing units
• use gy-* to adjust vertical gutters
• use gx-* to adjust horizontal gutters

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>

Bootstrap 4: codeply/go/OBW3RK1ErD

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 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 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; }

Just add the no-gutter class to the .row.

Demo: bootply/107458