如何在 Bootstrap 中删除列之间的装订线(间距)? [英] How to remove the gutter (spacing) between columns in 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:http://codeply.com/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 中即可.

演示:http://bootply.com/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: http://codeply.com/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: http://bootply.com/107458

这篇关于如何在 Bootstrap 中删除列之间的装订线(间距)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！