从 Bootstrap 4 / Bootstrap 5 中的网格列中删除填充间距

Question

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

是否有官方的API移除装订线或手动？

Answer 1

所有视口g-0 .. g-5
响应式视口 g-sm-0 .. g-lg-5
horizontal/vertical 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>

它将：

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

Answer 2

您可以使用此 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;
}

Answer 3

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

@include make-col-ready(0);

Answer 4

Need an edge-to-edge design? Drop the parent .container or .container-fluid.

仍然，如果您需要从 .row 和直接子列中删除填充，您必须将 class .no-gutters 与上面@Brian 的代码添加到您自己的 CSS 文件，实际上它不是 'right out of the box'，请在此处查看最终 Bootstrap 4 版本的官方详细信息：https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters

Answer 5

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

从 Bootstrap 4 / Bootstrap 5 中的网格列中删除填充间距

Removing padding gutter from grid columns in Bootstrap 4 / Bootstrap 5

twitter-bootstrap

bootstrap-4

bootstrap-5