槽（Gutters）

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

当前页

工作原理

**槽（Gutters）是列内容之间的间隙，由水平padding创建。**我们在每列上设置 padding-right和padding-left，并使用负 margin在每行的开头和结尾偏移以对齐内容。
槽（Gutters）从1.5rem (24px)宽开始。这使我们能够将网格与填充和边距间隔比例相匹配。
槽（Gutters）可以响应式调整。 使用特定于断点的槽类修改水平槽、垂直槽和所有槽。

水平 gutters

.gx-*类可用于控制水平槽宽度。如果也使用较大的槽以避免不必要的溢出，则可能需要使用匹配的填充实用程序调整.container或.container-fluid父级。例如，在以下示例中，我们使用.px-4`增加了填充：

Custom column padding

html

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

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

Custom column padding

html

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

垂直 gutters

.gy-*类可用于控制列换行到新行时行内的垂直槽宽度。与水平槽一样，垂直槽可能会导致页面末尾.row 下方出现一些溢出。如果发生这种情况，您可以使用.overflow-hidden类在.row 周围添加一个包装器：

Custom column padding

html

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

水平和垂直槽 gutters

使用.g-*类来控制水平和垂直网格槽。在下面的示例中，我们使用较小的槽宽度，因此不需要 .overflow-hidden包装类。

Custom column padding

html

<div class="container text-center">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>

行列槽

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

Row column

html

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

无槽

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

需要边缘到边缘的设计？ 删除父级.container或 .container-fluid，并将 .mx-0添加到.row 以防止溢出。

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

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

.col-6 .col-md-4

html

<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,
);