Bootstrap5 槽宽（Gutters）

槽宽（Gutters）

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

Gutters是如何工作

• Gutters是列内容之间的间隙，由水平padding创建的。我们在每一列设置padding-right和padding-left，并在每一行的开头和结尾使用负margin来抵消，以对齐内容。

• Gutters开始是1.5rem（20px）宽。这使我们能够根据padding和margin spacers的比例来匹配我们的网格。

• Gutters可以响应地调整。使用断点特定的gutter类来修改水平间隔、垂直间隔和所有间隔。

水平间隔

.gx-*类可以用来控制水平间隔宽度。如果使用较大的间隔，可能需要调整.container或.container-fluid父类，以避免溢出，使用匹配的padding工具。例如，在下面的例子中，我们用.px-4增加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类的封装器。

<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下面造成一些溢出。如果发生这种情况，你可以使用.overflow-hidden类在.row周围添加一个包装器。

<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包装类。

<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>

在线运行

行列间隔

还可以在行列中添加间隔类。在下面的例子中，我们使用响应的行列和响应的间隔。

<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的负边距和所有子列的水平填充。

需要边到边？ 那就删除父级的.container或.container-fluid。

在实践中，请注意，你可以继续将其用于所有其他预定义的网格类（包括列宽、响应式层、重排序等）。

<div class="row g-0 text-center">
  <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>

在线运行

改变间隔

是从$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,
);