間隙（Gutters）
間隙是列之間的填充，用于在Bootstrap網(wǎng)格系統(tǒng)中相應(yīng)地分隔和對(duì)齊內(nèi)容。
工作原理
-
間隙是由水平填充創(chuàng)建的列內(nèi)容之間的間隙。由水平方向的
padding實(shí)現(xiàn)。 我們?cè)诿恳涣猩显O(shè)置右邊填充和左邊填充padding-rightandpadding-left，并在每一行的開(kāi)始和結(jié)束處使用margin來(lái)偏移該邊距以對(duì)齊內(nèi)容。 -
間隙的寬度為1.5rem（24px） 。 這允許我們將網(wǎng)格與填充和邊距分隔符比例相匹配
-
間隙可以進(jìn)行相應(yīng)的調(diào)整。 使用斷點(diǎn)特定的間隙類修改水平間隙、垂直間隙和所有間隙。
水平間隙
.gx-*類可用于控制水平間隙寬度。如果使用較大的排水溝，則可能需要調(diào)整.container或.container流體父級(jí)，以避免不必要的溢出，使用匹配的填充實(shí)用程序。例如，在下面的示例中，我們使用.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>另一種解決方案是在.overflow隱藏類的.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>垂直間隙
.gy-*類可用于控制垂直間隙寬度。與水平間隙一樣，垂直間隙也會(huì)導(dǎo)致頁(yè)面末尾的.行下面出現(xiàn)一些溢出。如果出現(xiàn)這種情況，請(qǐng)?jiān)?row周圍添加一個(gè)包裝器，其中包含.overflow隱藏類：
<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-*類可用于控制水平間隙寬度，對(duì)于以下示例，我們使用較小的間隙寬度，因此不需要添加.overflow隱藏包裝類。
<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>行列間隙
也可以將邊溝類添加到行列中。在下面的示例中，我們使用響應(yīng)行列和響應(yīng)間隙類。
<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>無(wú)間隙
可以使用 .g-0刪除預(yù)定義網(wǎng)格類中列之間的間隙。這將刪除.row的margin和所有直接子列的水平填充。
需要邊到邊的設(shè)計(jì)嗎？ 放棄 .container or
.container-fluid.
實(shí)際上，它看起來(lái)是這樣的。注意：您可以繼續(xù)將其用于所有其他預(yù)定義的網(wǎng)格類（包括列寬、響應(yīng)層、重排序等）。
<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映射構(gòu)建的，該映射繼承自$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,
);