装订线

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

他们如何工作

🌐 How they work

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

水平装订线

🌐 Horizontal 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 周围添加一个封装器：

🌐 An alternative solution is to add a wrapper around the .row with the .overflow-hidden class:

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>

垂直装订线

🌐 Vertical gutters

.gy-* 类可以用来在列换行时控制行内的垂直间距宽度。像水平间距一样，垂直间距可能会在页面末尾的 .row 下方造成一些溢出。如果发生这种情况，可以在 .row 周围添加一个带有 .overflow-hidden 类的封装器：

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>

水平和垂直装订线

🌐 Horizontal & vertical gutters

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

🌐 Use .g-* classes to control the horizontal and vertical grid gutters. In the example below, we use a smaller gutter width, so there isn’t a need for the .overflow-hidden wrapper class.

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

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

🌐 Gutter classes can also be added to row columns. In the following example, we use responsive row columns and responsive gutter classes.

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>

无装订线

🌐 No gutters

在我们预定义的网格类中，列之间的间隙可以用 .g-0 移除。这会从 .row 中移除负的 margin，以及从所有直接子列中移除水平的 padding。

🌐 The gutters between columns in our predefined grid classes can be removed with .g-0. This removes the negative margins from .row and the horizontal padding from all immediate children columns.

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

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

🌐 In practice, here’s how it looks. Note that you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).

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

改变装订线

🌐 Change the gutters

类是由 $gutters Sass 映射构建的，该映射继承自 $spacers Sass 映射。

🌐 Classes are built from the $gutters Sass map which is inherited from the $spacers Sass map.

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);