间距

间距是列之间的填充，用于在 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>

行列间距

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

行行列

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