Gutters间沟

How they work工作原理

• Gutters are the gaps between column content, created by horizontal padding.间沟是由水平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.我们在每一列上设置padding-right和padding-left，并使用负margin在每一行的开始和结束处偏移该边距以对齐内容。

• Gutters start at 1.5rem (24px) wide.间沟的起始宽度为1.5rem（24px）。 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-* classes can be used to control the horizontal gutter widths. .gx-*类可用于控制水平排水沟宽度。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. 如果也使用较大的水槽来避免不必要的溢出，则可能需要使用匹配的填充实用程序来调整.container或.container-fluid父对象。For example, in the following example we’ve increased the padding with .px-4:例如，在下面的示例中，我们使用.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>

An alternative solution is to add a wrapper around the .row with the .overflow-hidden class:另一种解决方案是使用.overflow-hidden类在.row周围添加包装：

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

Vertical gutters垂直间沟

.gy-* classes can be used to control the vertical gutter widths. .gy-*类可用于控制垂直间沟宽度。Like the horizontal gutters, the vertical gutters can cause some overflow below the .row at the end of a page. 与水平左侧列一样，垂直左侧列可能会导致页面末尾的.row下面出现一些溢出。If this occurs, you add a wrapper around .row with the .overflow-hidden class:如果出现这种情况，您将在.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>

Horizontal & vertical gutters水平兼垂直间沟

.g-* classes can be used to control the horizontal gutter widths, for the following example we use a smaller gutter width, so there won’t be a need to add the .overflow-hidden wrapper class..g-*类可用于控制水平边沟宽度，在下面的示例中，我们使用较小的边沟宽度，因此无需添加.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>

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">
<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没有间沟

The gutters between columns in our predefined grid classes can be removed with .g-0. 可以使用.g-0删除预定义网格类中列之间的左侧列。This removes the negative margins from .row and the horizontal padding from all immediate children columns.这将删除.row中的负margin和所有直接子列中的水平padding。

Need an edge-to-edge design?需要边到边的设计吗？ Drop the parent .container or .container-fluid.放下.container或.container-fluid。

In practice, here’s how it looks. 实际上，它看起来是这样的。Note 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">
<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改变间沟

Classes are built from the $gutters Sass map which is inherited from the $spacers Sass map.类是从$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,
);