Bootstrap-如何删除列之间的装订线 [英] Bootstrap - How to remove the gutter between columns

问题描述

如何删除列之间的30px装订线?但是没有设置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>

解决方案

更新2018年

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

<div class="row no-gutters">
    <div class="col">x</div>
    <div class="col">x</div>
    <div class="col">x</div>
</div>

引导程序4: http://www.codeply.com/go/OBW3RK1ErD

---

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

您可以使用的HTML:

 <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 装订线是使用填充创建的.您还必须调整负边距，以使外列之间的间距不受影响.

 .no-gutter {
  margin-right: 0;
  margin-left: 0;
}

.no-gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 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 2018

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://www.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屋！