如何移除列之间的 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
更多推荐
如何在 Bootstrap 中删除列之间的装订线(间距)?
发布评论