删除cols之间的间距

Question

我想删除Bootstrap网格中多列之间的空格.

我们如何覆盖Bootstrap的CSS以实现此任务或使用纯CSS的任何其他更好的解决方案？

main.html中

<div class="row">
  <div class="col-md-2">
    // stuff here for this column
  </div>
  <div class="col-md-10">
    // stuff here for columns
  </div>
</div>

Answer 1

在需要删除空格时添加一个类使用它

.padding-0{
    padding-right:0;
    padding-left:0;
}

在html中写这个类

<div class="row">
   <div class="col-md-2 padding-0">
       //stuff here for this column
   </div>
   <div class="col-md-10 padding-0">
       //stuff here for columns
   </div>
</div>

Answer 2

在Bootstrap 4中,no-gutters包括该类.不需要额外的CSS ......

<div class="row no-gutters">
  <div class="col-md-2">
    // stuff here for this column
  </div>
  <div class="col-md-10">
    // stuff here for columns
  </div>
</div>

Answer 3

在Bootstrap 4中,您可以添加类mx-*和px-*

<div class="row mx-0">
    <div class="col-md-6 px-0">
        <p>Your content</p>
    </div>
    <div class="col-md-6 px-0">
        <p>Your content</p>
    </div>
</div>

类的类mx-*和px-*默认引导样式,因此您不必手动添加它

mx-*代表margin-right: *加号margin-left: *.同时px-*代表左右填充.

还有my-* m-* mt-* mb-* mr-* ml-*和py-* p-* pt-* pb-* pr-* pl-*.

Answer 4

您可以no-gutter为您创建一个类,row并删除bootstrap添加的边距/填充,如本文中所示:

.row.no-gutter {
  margin-left: 0;
  margin-right: 0;
}
.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}
.row > div {
  background: lightgrey;
  border: 1px solid;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row no-gutter">
  <div class="col-md-2">
    1
  </div>
  <div class="col-md-10">
    2
  </div>
</div>

我为演示目的设置了灰色背景和边框.全屏观察结果,看到列之间不再有空间.有关Bootstrap中预定义边距和填充的更多信息,请参见此处.