装订线是列之间的填充，用于响应式间隔和对齐 Bootstrap 网格系统中的内容。
它们如何工作
-
装订线是列内容之间的间隙，由水平
填充创建。我们在每列上设置 和，并使用负数在每行的开头和结尾偏移它以对齐内容。padding-rightpadding-leftmargin -
装订线的宽度从
1.5rem（24px） 开始。这使我们能够将网格与填充和边距间隔符比例相匹配。 -
排水沟可以响应式调整。使用特定于断点的装订线类修改水平装订线、垂直装订线和所有装订线。
水平排水沟
.gx-*类可用于控制水平装订线宽度。如果也使用较大的装订线，则可能需要调整 or 父项，以避免不必要的溢出，使用匹配的填充实用程序。例如，在以下示例中，我们增加了填充：.container.container-fluid.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>另一种解决方案是在类周围添加包装器：.row.overflow-hidden
<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
<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
<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>行列装订线
装订线类也可以添加到行列中。在以下示例中，我们使用响应式行列和响应式装订线类。
<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>无排水沟
预定义网格类中列之间的装订线可以使用 删除。这将从所有直接子列中删除负数 s 和水平值。.g-0margin.rowpadding
需要无边无边设计？删除父级 or 并添加到 以防止溢出。.container.container-fluid.mx-0.row
在实践中，它的外观如下。请注意，您可以继续将其与所有其他预定义的网格类（包括列宽、响应层、重新排序等）一起使用。
<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>更换装订线
类是从继承自 Sass 映射的 Sass 映射构建的。$gutters$spacers
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);