沟槽(Gutters)

Bootstrap 网格系统的沟槽是列之间的内边距，用于调整响应式空间和对齐 Bootstrap 网格系统中的内容。

内容提要

工作原理

间距是列内容之间的间隙，由水平 padding 创建。 我们设置 padding-right 和 padding-left 在每一列上，并使用负 margin 在每行的开头和结尾偏移以对齐内容。
沟槽从 1.5rem (24px) 宽开始。 这允许我们将网格与内边距和外边距空间缩放匹配。
可以响应式调整沟槽。 使用特定于断点的沟槽类来修改水平沟槽、垂直沟槽和所有沟槽。

水平沟槽

.gx-* 类可用于控制水平间距宽度。如果.container 或 .container-fluid 父级元素也设置较大的沟槽，为了避免不必要的溢出。可能需要使用匹配的内边距实用程序来调整，例如，在以下示例中，我们使用 .px-4 增加内边距：

Custom column padding

<div class="container px-4">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

另一种解决方案是在 .row 周围添加一个包装元素，并使用 .overflow-hidden 类：

Custom column padding

<div class="container overflow-hidden">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

垂直沟槽

.gy-* 类可用于控制垂直间距宽度。与水平沟槽一样，垂直沟槽可能会导致页面末尾的 .row 下方出现一些溢出。如果发生这种情况，请在 .row 周围添加一个包装元素，并使用.overflow-hidden类：

Custom column padding

<div class="container overflow-hidden">
  <div class="row gy-5">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

所有(水平和垂直)沟槽

.g-* 类可用于控制沟槽间距宽度，对于以下示例，我们使用较小的沟槽宽度，因此无需添加 .overflow-hidden 包装类。

Custom column padding

<div class="container">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

行列沟槽

也可以将 Gutter 类添加到行列。在以下示例中，我们使用响应式行列和响应式沟槽类。

Row column

<div class="container">
  <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
  </div>
</div>

无沟槽

可以使用 .g-0 删除我们预定义的网格类中列之间的间距。这将删除 .row 中的负 margin 和所有直接子列中的水平 padding。

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

在实践中，它看起来是这样的。请注意，您可以继续将其与所有其他预定义的网格类（包括列宽、响应层、重新排序等）一起使用。

.col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row g-0">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

修改沟槽

沟槽类是从 $gutters Sass 映射构建的，它继承自 $spacers Sass 映射。

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);