間隙（Gutters）

間隙是列之間的填充，用于在Bootstrap網格系統中相應地分隔和對齊內容。

On this page

工作原理

間隙是由水平填充創建的列內容之間的間隙。由水平方向的 padding實現。 我們在每一列上設置右邊填充和左邊填充padding-right and padding-left，并在每一行的開始和結束處使用margin 來偏移該邊距以對齊內容。
間隙的寬度為1.5rem（24px）。 這允許我們將網格與填充和邊距分隔符比例相匹配
間隙可以進行相應的調整。 使用斷點特定的間隙類修改水平間隙、垂直間隙和所有間隙。

水平間隙

.gx-*類可用于控制水平間隙寬度。如果使用較大的排水溝，則可能需要調整.container或.container流體父級，以避免不必要的溢出，使用匹配的填充實用程序。例如，在下面的示例中，我們使用.px-4增加了填充：

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

<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

<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

<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

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