Žlaby
Mezery jsou vycpávky mezi sloupci, které se používají k citlivému prostoru a zarovnání obsahu v systému mřížky Bootstrap.
Jak fungují
-
Žlaby jsou mezery mezi obsahem sloupců, vytvořené horizontálním
padding
. Nastavímepadding-right
apadding-left
na každý sloupec a použijeme zápormargin
k odsazení na začátku a konci každého řádku, abychom zarovnali obsah. -
Žlaby začínají na šířce
1.5rem
( ).24px
To nám umožňuje přizpůsobit naši mřížku měřítku vycpávek a okrajových distančních vložek . -
Žlaby lze citlivě nastavit. K úpravě vodorovných okapů, svislých okapů a všech okapů použijte specifické třídy okapů.
Vodorovné žlaby
.gx-*
třídy lze použít k ovládání vodorovných šířek okapů. Pokud jsou také použity větší okapy , může být nutné upravit .container
nebo .container-fluid
rodič, aby se zabránilo nechtěnému přetečení, pomocí vhodného nástroje pro výplň. Například v následujícím příkladu jsme zvýšili výplň pomocí .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>
Alternativním řešením je přidat obal kolem třídy .row
s .overflow-hidden
třídou:
<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>
Svislé žlaby
.gy-*
třídy lze použít k ovládání svislých šířek okapů. Stejně jako horizontální mezery mohou i vertikální mezery způsobit přetečení pod .row
na konci stránky. Pokud k tomu dojde, přidáte obal kolem .row
třídy .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>
Horizontální a vertikální žlaby
.g-*
třídy lze použít k ovládání šířky horizontálního okapu, pro následující příklad použijeme menší šířku okapu, takže nebude potřeba přidávat .overflow-hidden
třídu wrapper.
<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>
Řadové sloupy žlaby
Do řádkových sloupců lze také přidat třídy okapů . V následujícím příkladu používáme responzivní řádkové sloupce a responzivní třídy mezery.
<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>
Žádné okapy
Žlaby mezi sloupy v našich předdefinovaných třídách mřížky lze odstranit pomocí .g-0
. Tím se odstraní záporné margin
s .row
a vodorovné padding
ze všech přímých podřízených sloupců.
Potřebujete design od okraje k okraji? Pusťte rodič .container
nebo .container-fluid
.
V praxi to vypadá takto. Všimněte si, že to můžete i nadále používat se všemi ostatními předdefinovanými třídami mřížky (včetně šířek sloupců, responzivních vrstev, změn pořadí a dalších).
<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>
Vyměňte okapy
Třídy jsou sestaveny z $gutters
mapy Sass, která je zděděna z $spacers
mapy Sass.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);