间隙（Gutters）

间隙（gutters）是列之间的填充物，用于在 Bootstrap 栅格系统中响应性地间隔和对齐内容。

On this page

如何工作

间隙是由水平 padding创建的列内容之间的间隙。 我们在每一列设置padding-right和padding-left，并在每一行的开头和结尾使用负margin来抵消，以对齐内容。
栅格的起始宽度为 1.5rem (24px) 这样我们就可以将栅格与 padding and margin spacers比例相匹配。
间隙可进行响应式调整。 使用特定于断点的间隙类来修改水平间隙、垂直间隙和所有间隙。

水平间隙

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

垂直间隙

当列换行时，.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>

水平和垂直间隙

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

行列间隙

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

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，并在.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,
);