槽(Gutters)

Gutters 列之间的填充，用于在Bootstrap网格系统中相应地分隔和对齐内容。

在本页面

他们如何工作

列内容之间的间距是由水平padding创建的。我们在每一列上设置padding-right 和 padding-left，并在每一行的开始和结束处使用负margin来偏移该边距以对齐内容。
Gutters的宽度为 1.5rem (24px) 。 这使我们能够将网格与填充和边距分隔符比例相匹配。
Gutters 可以进行相应的调整。使用断点特定的 gutter类修改水平 gutters、垂直 gutters和所有 gutters。

水平 gutters

.gx-*类可用于控制水平 gutter宽度。如果使用较大的gutter，则可能需要调整 .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>

垂直 gutters

.gy-*类可用于控制垂直 gutter 宽度。像水平 gutters，垂直 gutters可能会导致 .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>

水平和垂直 gutters

.g-* 类可用于控制水平 gutter 宽度，对于以下示例，我们使用较小的 gutter宽度，因此不需要添加.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>

行列 gutters

Gutter类也可以添加到行列。在以下示例中，我们使用响应式行列和响应式 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>

No gutters

可以使用.g-0删除预定义网格类中列之间的 gutters。这将删除.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

类是从$guttersSass映射构建的，该映射继承自 $spacersSass映射。

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