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中，您可以添加课程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-*的类是默认的bootstrap样式，因此您不必手动添加

mx-*代表margin-right: *加margin-left: *。虽然px-*代表左右填充。

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

Answer 3

您可以为no-gutter创建一个类row，并删除引导程序添加的边距/填充，如this post中建议的那样：

＆＃13;

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

＆＃13;

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

＆＃13;

我为演示目的设置了灰色背景和边框。全屏观察结果，看到列之间不再有空间。有关Bootstrap中预定义边距和填充的更多信息可以是found here。

Answer 4

在柱子上，两侧有一个15px的填充物，如果你移除它们应该坐在一起。

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    padding-right: 0px;
    padding-left: 0px;
}

此代码段来自grid-framework.less中的修改代码。

Answer 5

我会在行中添加一个类，并使用后代通配符选择器将列子目标作为目标：

<强> HTML：

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

<强> CSS：

.nopadding > div[class^="col-"] {
    padding-right: 0;
    padding-left: 0;
}

Answer 6

如果您使用的是LESS，则可以使用代码段并将其应用于该行。

.no-gutter {
   [class*="col-"] {
       padding-left: 0 !important;
       padding-right: 0 !important;
   }
}

如果是普通的CSS

.no-gutter > [class*="col-"]{
}

像这样：

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

Answer 7

Anshuman的解决方案确实有效！当你在样式中将填充设置为零时，它取消了bootstrap列空间，即padding：0;

<div class = "row">
  <div class = "col-sm-3" style= "padding:0;">
    //html code here..
  </div>
  <div class = "col-sm-3" style= "padding:0;">
    //html code here..
  </div>
</div>

Answer 8

简单地添加.no-gutter on row。

https://getbootstrap.com/docs/4.0/layout/grid/#how-it-works

删除cols之间的间距

8 个答案: