装订线

他们如何工作

¥How they work

• 装订线是列内容之间的间隙，由水平 padding 创建。我们在每列上设置 padding-right 和 padding-left，并使用负 margin 在每行的开头和结尾处进行偏移以对齐内容。

  ¥Gutters are the gaps between column content, created by horizontal padding. We set padding-right and padding-left on each column, and use negative margin to offset that at the start and end of each row to align content.

• 装订线的起始宽度为 1.5rem (24px)。这使我们能够将网格与填充和边距间隔 比例相匹配。

  ¥Gutters start at 1.5rem (24px) wide. This allows us to match our grid to the padding and margin spacers scale.

• 装订线可以进行响应式调整。使用特定于断点的装订线类来修改水平装订线、垂直装订线和所有装订线。

  ¥Gutters can be responsively adjusted. Use breakpoint-specific gutter classes to modify horizontal gutters, vertical gutters, and all gutters.

水平装订线

¥Horizontal gutters

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

¥.gx-* classes can be used to control the horizontal gutter widths. The .container or .container-fluid parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility. For example, in the following example we’ve increased the padding with .px-4:

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

<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 下面出现一些溢出。如果发生这种情况，你可以使用 .overflow-hidden 类在 .row 周围添加一个封装器：

¥.gy-* classes can be used to control the vertical gutter widths within a row when columns wrap to new lines. Like the horizontal gutters, the vertical gutters can cause some overflow below the .row at the end of a page. If this occurs, you add a wrapper around .row with the .overflow-hidden class:

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

<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

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

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

<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 以防止溢出。

¥Need an edge-to-edge design? Drop the parent .container or .container-fluid and add .mx-0 to the .row to prevent overflow.

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

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

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