删除列之间的间距

Question

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

我们如何覆盖 Bootstrap 的 CSS 来完成这项任务或使用纯 CSS 的任何其他更好的解决方案？

ma​​in.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

在 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-*。

编辑：

Bootstrap 5 使用了 ps-* pe-* ms-* me-* 并删除了 pl-* pr-* ml-* mr-*。它使用“start”和“end”而不是“left”和“right”。

Answer 2

在 Bootstrap 5 中，no-gutters 类已更改为 g-0

在 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

在行上简单添加 .no-gutter。

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

Answer 4

Anshuman 的解决方案确实有效！当您在样式中将填充设置为零时，它会摆脱引导列空间，即 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 5

在列上，两边都有一个 15 像素的填充，如果您删除它们应该坐在一起。

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

这个 sn-p 来自 grid-framework.less 中的修改代码。

Answer 6

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

.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 中预定义的边距和内边距的信息可以到found here。

Answer 7

如果您使用 LESS，您可以使用 sn-p 并将其应用于行。

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

我会在行中添加一个类，并使用后代通配符选择器定位子列：

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 9

添加一个类，当你需要删除空格时使用它

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