自学教程Gutters 列之间的填充，用于在Bootstrap网格系统中相应地分隔和对齐内容。
他们如何工作
- 列内容之间的间距是由水平
padding创建的。我们在每一列上设置padding-right和padding-left，并在每一行的开始和结束处使用 负margin来偏移该边距以对齐内容。 - Gutters的宽度为
1.5rem(24px) 。 这使我们能够将网格与 填充和边距分隔符 比例相匹配。 - Gutters 可以进行相应的调整。使用断点特定的 gutter类修改水平 gutters、垂直 gutters和所有 gutters。
水平 gutters
.gx-*类可用于控制水平 gutter宽度。如果使用较大的gutter，则可能需要调整 .container 或 .container-fluid父级，以避免不必要的溢出，使用匹配的填充实用程序。例如，在下面的示例中，我们使用.px-4增加了填充：
<div class="container px-4">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>另一种解决方案是.row 在.overflow-hidden类的周围添加包装器：
<div class="container overflow-hidden">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>垂直 gutters
.gy-*类可用于控制垂直 gutter 宽度。像水平 gutters，垂直 gutters可能会导致 .row 页面末尾的下溢。。如果出现这种情况，请在 .row周围添加一个包装器，其中包含.overflow-hidden 类：
<div class="container overflow-hidden">
<div class="row gy-5">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>水平和垂直 gutters
.g-* 类可用于控制水平 gutter 宽度，对于以下示例，我们使用较小的 gutter宽度，因此不需要添加.overflow-hidden包装类。
<div class="container">
<div class="row g-2">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>行列 gutters
Gutter类也可以添加到行列。 在以下示例中，我们使用响应式行列和响应式 gutter 类。
<div class="container">
<div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
</div>
</div>No gutters
可以使用.g-0删除预定义网格类中列之间的 gutters。 这将删除.row的负margin和所有直接子列的水平padding。
需要边到边的设计吗？ 删除父项 .container 或 .container-fluid.
实际上，它看起来是这样的。注意：您可以继续将其用于所有其他预定义的网格类（包括列宽、响应层、重排序等）。
<div class="row g-0">
<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
类是从$guttersSass映射构建的，该映射继承自 $spacersSass映射。
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);
分享笔记