间隙（Gutters）

间隙是列之间的填充，用于在Bootstrap网格系统中相应地分隔和对齐内容。

On this page

工作原理

  • 间隙是由水平填充创建的列内容之间的间隙。由水平方向的 padding实现。 我们在每一列上设置右边填充和左边填充padding-right and padding-left，并在每一行的开始和结束处使用margin 来偏移该边距以对齐内容。

  • 间隙的宽度为1.5rem（24px） 。 这允许我们将网格与填充和边距分隔符比例相匹配

  • 间隙可以进行相应的调整。 使用断点特定的间隙类修改水平间隙、垂直间隙和所有间隙。

水平间隙

.gx-*类可用于控制水平间隙宽度。如果使用较大的排水沟，则可能需要调整.container或.container流体父级，以避免不必要的溢出，使用匹配的填充实用程序。例如，在下面的示例中，我们使用.px-4增加了填充：

Custom column padding
Custom column padding
<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>

另一种解决方案是在.overflow隐藏类的.row周围添加包装器：

Custom column padding
Custom column padding
<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>

垂直间隙

.gy-*类可用于控制垂直间隙宽度。与水平间隙一样，垂直间隙也会导致页面末尾的.行下面出现一些溢出。如果出现这种情况，请在.row周围添加一个包装器，其中包含.overflow隐藏类：

Custom column padding
Custom column padding
Custom column padding
Custom column padding
<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>

水平和垂直间隙

.g-*类可用于控制水平间隙宽度，对于以下示例，我们使用较小的间隙宽度，因此不需要添加.overflow隐藏包装类。

Custom column padding
Custom column padding
Custom column padding
Custom column padding
<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 column
Row column
Row column
Row column
Row column
Row column
Row column
Row column
Row column
Row column
<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>

无间隙

可以使用 .g-0删除预定义网格类中列之间的间隙。这将删除.row的margin和所有直接子列的水平填充。

需要边到边的设计吗？ 放弃 .container or .container-fluid.

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

.col-sm-6 .col-md-8
.col-6 .col-md-4
<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 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,
);
返回顶部