Odkvapy
Odkvapy sú vypchávky medzi stĺpcami, ktoré sa používajú na reagujúcu medzeru a zarovnanie obsahu v systéme mriežky Bootstrap.
Ako fungujú
-
Odkvapy sú medzery medzi obsahom stĺpcov, vytvorené horizontálnym
padding
. Nastavímepadding-right
apadding-left
na každý stĺpec a použijeme zápormargin
na vyrovnanie na začiatku a na konci každého riadku, aby sme zarovnali obsah. -
Odkvapy začínajú na šírku
1.5rem
( ).24px
To nám umožňuje zosúladiť našu mriežku s mierkou vypchávky a rozperných vložiek. -
Odkvapy je možné responzívne nastaviť. Na úpravu horizontálnych odkvapov, zvislých odkvapov a všetkých odkvapov použite triedy odkvapov špecifické pre bod zlomu.
Horizontálne odkvapy
.gx-*
triedy možno použiť na ovládanie šírky vodorovných odkvapov. Ak sa používajú aj väčšie žľaby, môže byť potrebné upraviť .container
alebo rodič, aby sa predišlo nežiaducemu pretečeniu, pomocou vhodného nástroja na vypchávanie. .container-fluid
Napríklad v nasledujúcom príklade sme zvýšili výplň pomocou .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>
Alternatívnym riešením je pridať obal okolo triedy .row
s .overflow-hidden
triedou:
<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>
Zvislé odkvapy
.gy-*
triedy možno použiť na ovládanie šírky zvislých odkvapov. Podobne ako vodorovné odkvapy, aj zvislé odkvapy môžu spôsobiť pretečenie pod .row
na konci stránky. Ak k tomu dôjde, pridáte obal okolo .row
triedy .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álne a vertikálne odkvapy
.g-*
triedy možno použiť na ovládanie šírky horizontálneho odkvapu, v nasledujúcom príklade použijeme menšiu šírku odkvapu, takže nebude potrebné pridávať .overflow-hidden
triedu 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>
Rad stĺpov odkvapy
Do stĺpcov riadkov je možné pridať aj triedy medzikružia . V nasledujúcom príklade používame responzívne riadkové stĺpce a responzívne triedy odkvapov.
<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>
Žiadne odkvapy
Odkvapy medzi stĺpmi v našich preddefinovaných triedach mriežky je možné odstrániť pomocou .g-0
. Toto odstráni záporné margin
s .row
a horizontálne padding
zo všetkých bezprostredných podradených stĺpcov.
Potrebujete dizajn od okraja po okraj? Zahodiť rodiča .container
alebo .container-fluid
.
V praxi to vyzerá takto. Všimnite si, že to môžete naďalej používať so všetkými ostatnými preddefinovanými triedami mriežky (vrátane šírok stĺpcov, responzívnych vrstiev, zmien poradia a ďalší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>
Vymeňte odkvapy
Triedy sú postavené z $gutters
mapy Sass, ktorá je zdedená 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,
);