天溝
排水溝是列之間的填充,用於響應式空間和對齊 Bootstrap 網格系統中的內容。
他們是如何工作的
-
間距是列內容之間的間隙,由水平創建
padding
。我們在每一列上設置padding-right
和,並在每行的開頭和結尾padding-left
使用負數來抵消它以對齊內容。margin
-
排水溝從
1.5rem
(24px
) 寬開始。這使我們能夠將網格與填充和邊距間隔比例相匹配。 -
可以響應地調整排水溝。使用特定於斷點的裝訂線類來修改水平裝訂線、垂直裝訂線和所有裝訂線。
水平排水溝
.gx-*
類可用於控制水平裝訂線寬度。如果也使用較大的排水溝以避免不必要的溢出,則可能需要調整.container
or父級,使用匹配的填充實用程序。.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>
垂直排水溝
.gy-*
類可用於控制垂直裝訂線寬度。.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>
水平和垂直排水溝
.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>
行列排水溝
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>
沒有排水溝
我們預定義的網格類中的列之間的間距可以用.g-0
. 這會從所有直接子列中刪除負數margin
s.row
和水平線。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
繼承自$spacers
Sass 映射的 Sass 映射構建的。
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);