Bootstrap 4 / Bootstrap 5 中如何去除网格列的填充间距？

Question

如何在Bootstrap 4中创建没有间距的网格？

是否有官方API可以移除间距，还是需要手动操作？

- Blair Anderson

Answer 1

Bootstrap5：具备间距实用工具

• 适用于所有视口g-0 .. g-5
• 响应式视口g-sm-0 .. g-lg-5
• 水平/垂直gy-0 .. gx-5

零间距示例：

<div class="container">
  <div class="row g-0">
    <div class="col-6">
      <div class="p-3 border bg-light">...</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">...</div>
    </div>
  </div>
</div> 

Bootstrap4:默认提供.no-gutters样式。

来源：https://github.com/twbs/bootstrap/pull/21211/files

Bootstrap3:

需要自定义CSS。

样式表：

.row.no-gutters {
  margin-right: 0;
  margin-left: 0;

  & > [class^="col-"],
  & > [class*=" col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

接着使用:

<div class="row no-gutters">
  <div class="col-xs-4">...</div>
  <div class="col-xs-4">...</div>
  <div class="col-xs-4">...</div>
</div>

它将：

• 从行中删除边距
• 从位于该行下方的所有列中直接删除填充

- Blair Anderson

---

在Bootstrap 5中，您可以使用这些类（mx，px）来删除div的边距和填充。<div class="container mx-0 my-0 px-0 py-0"> - Qazi Ammar

Answer 2

您应该使用内置的Bootstrap4间距类来自定义元素间的间距，这是更为方便的方法。

- sheetal

Answer 3

需要边缘对边缘的设计吗？去掉父元素 .container 或 .container-fluid。如果您仍需要从 .row 和直接子列中移除填充，则必须将类 .no-gutters 与 @Brian 上面的代码添加到自己的CSS文件中，实际上这不是“开箱即用的”，请在此处查看有关Bootstrap 4最终发布的官方详细信息：https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters。

- Iqtidar Ali

Answer 4

您可以使用以下CSS代码在Bootstrap中获得无间隔网格。

.no-gutter.row,
.no-gutter.container,
.no-gutter.container-fluid{
  margin-left: 0;
  margin-right: 0;
}

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

- pascalnouma

Answer 5

您可以使用mixin make-col-ready并将gutter宽度设置为零： @include make-col-ready(0);

- roNn23