从 Bootstrap 4 / Bootstrap 5 中的网格列中删除填充间距 [重复]答案

【问题标题】：Removing padding gutter from grid columns in Bootstrap 4 / Bootstrap 5 [duplicate]从 Bootstrap 4 / Bootstrap 5 中的网格列中删除填充间距 [重复]
【发布时间】：2022-01-05 02:25:44
【问题描述】：

如何在 bootstrap 4 中创建无间距网格？

是否有官方的 API 可以去除排水沟还是手动的？

【问题讨论】：

标签： twitter-bootstrap bootstrap-4 bootstrap-5

【解决方案1】：

Bootstrap5： 自带gutter utilities

所有视口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>

它会：

从行中删除边距
从行正下方的所有列中删除填充

【讨论】：

在 bootstrap-5 中，您可以使用这些类 (mx, px) 来删除 div 的边距和填充。

【解决方案2】：

您应该使用built-in bootstrap4 spacing classes 来自定义元素的间距，这是更方便的方法。

【讨论】：

【解决方案3】：

需要无边框设计？删除父 .container 或 .container-fluid。

如果您需要从.row 和直接子列中删除填充，您必须将类.no-gutters 与上面@Brian 的代码添加到您自己的CSS 文件中，实际上它不是“开箱即用” ，在此处查看有关最终 Bootstrap 4 版本的官方详细信息：https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters

【讨论】：

【解决方案4】：

您可以使用此 css 代码在引导程序中获得无间隙网格。

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

【讨论】：

【解决方案5】：

您可以使用 mixin make-col-ready 并将装订线宽度设置为零：

@include make-col-ready(0);

【讨论】：