槽宽

Gutters（槽宽）是列之间的间隔，用于在 Bootstrap 网格系统中响应式地分隔和对齐内容。

本页目录

它们是如何工作的

网格间距是列内容之间的间隙，由水平padding创建。 我们在每列上设置padding-right和padding-left，并在每行的开始和结束使用负margin来抵消，从而对齐内容。
网格间距起始宽度为1.5rem（24px）。 这使我们能够将网格与内边距和外边距间距刻度匹配。
网格间距可以响应式调整。 使用特定断点的网格间距类来修改水平间距、垂直间距以及全部间距。

水平间隙

.gx-* 类可用于控制水平间距宽度。如果使用了更大的间距，可能还需要调整 .container 或 .container-fluid 父元素，以避免不需要的溢出，可以使用匹配的内边距工具类。例如，在下面的示例中，我们使用 .px-4 增加了内边距：

自定义列填充

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>

另一种解决方案是为 .row 添加一个带有 .overflow-hidden 类的包装元素：

自定义列填充

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>

垂直间隙

.gy-* 类可以用于在列换行到新行时控制行内的垂直间距宽度。与水平间距一样，垂直间距可能会在页面末尾的 .row 处引起一些溢出。如果发生这种情况，可以在 .row 周围添加一个带有 .overflow-hidden 类的包装元素：

自定义列填充

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>

水平和垂直间隙

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

自定义列填充

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>

行列间距

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

行列

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，并为 .row 添加 .mx-0 以防止溢出。

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

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

更改沟槽

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