Medzery
Bootstrap obsahuje širokú škálu rýchlopisne reagujúcich okrajov a pomocných tried výplne na úpravu vzhľadu prvku.
Ako to funguje
Priraďte k prvku alebo podmnožine jeho strán pomocou tried skratiek responzívny prístup margin
alebo hodnoty. padding
Zahŕňa podporu pre jednotlivé vlastnosti, všetky vlastnosti a vertikálne a horizontálne vlastnosti. Triedy sú zostavené z predvolenej mapy Sass v rozsahu od .25rem
do 3rem
.
Notový zápis
Pomôcky na vytváranie medzier, ktoré sa vzťahujú na všetky body prerušenia, od xs
do xl
nemajú v sebe žiadnu skratku bodu prerušenia. Je to preto, že tieto triedy sú aplikované od min-width: 0
a vyššie, a teda nie sú viazané dopytom na médiá. Zostávajúce body prerušenia však obsahujú skratku bodu prerušenia.
Triedy sú pomenované pomocou formátu {property}{sides}-{size}
pre xs
a {property}{sides}-{breakpoint}-{size}
pre sm
, md
, lg
a xl
.
Ak je nehnuteľnosť jednou z:
m
- pre triedy, ktoré nastavujúmargin
p
- pre triedy, ktoré nastavujúpadding
Kde strany sú jednou z:
t
- pre triedy, ktoré stanovujúmargin-top
resppadding-top
b
- pre triedy, ktoré stanovujúmargin-bottom
resppadding-bottom
l
- pre triedy, ktoré stanovujúmargin-left
resppadding-left
r
- pre triedy, ktoré stanovujúmargin-right
resppadding-right
x
- pre triedy, ktoré nastavujú*-left
aj*-right
y
- pre triedy, ktoré nastavujú*-top
aj*-bottom
- prázdne - pre triedy, ktoré nastavujú a
margin
alebopadding
na všetkých 4 stranách prvku
Kde veľkosť je jedna z:
0
- pre triedy, ktoré eliminujúmargin
alebopadding
nastavením na0
1
- (predvolene) pre triedy, ktoré nastavujúmargin
alebopadding
na$spacer * .25
2
- (predvolene) pre triedy, ktoré nastavujúmargin
alebopadding
na$spacer * .5
3
- (predvolene) pre triedy, ktoré nastavujúmargin
alebopadding
na$spacer
4
- (predvolene) pre triedy, ktoré nastavujúmargin
alebopadding
na$spacer * 1.5
5
- (predvolene) pre triedy, ktoré nastavujúmargin
alebopadding
na$spacer * 3
auto
- pre triedy, ktoré nastavujúmargin
na auto
(Viac veľkostí môžete pridať pridaním položiek do $spacers
premennej mapy Sass.)
Príklady
Tu je niekoľko reprezentatívnych príkladov týchto tried:
.mt-0 {
margin-top: 0 !important;
}
.ml-1 {
margin-left: ($spacer * .25) !important;
}
.px-2 {
padding-left: ($spacer * .5) !important;
padding-right: ($spacer * .5) !important;
}
.p-3 {
padding: $spacer !important;
}
Horizontálne centrovanie
Bootstrap navyše obsahuje aj .mx-auto
triedu na horizontálne centrovanie obsahu na úrovni bloku s pevnou šírkou – teda obsahu, ktorý má display: block
a width
množinu – nastavením horizontálnych okrajov na auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Záporná marža
V CSS môžu margin
vlastnosti využívať záporné hodnoty ( padding
nemôže). Od verzie 4.2 sme pridali pomocné nástroje so zápornou maržou pre každú nenulovú veľkosť celého čísla uvedenú vyššie (napr. , , 1
, 2
, 3
) . Tieto nástroje sú ideálne na prispôsobenie žľabov mriežkových stĺpov naprieč bodmi prerušenia.4
5
Syntax je takmer rovnaká ako predvolené nástroje s kladnou maržou, ale s pridaním n
pred požadovanú veľkosť. Tu je príklad triedy, ktorá je opakom .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Tu je príklad prispôsobenia mriežky Bootstrap na strednom ( md
) bode prerušenia a vyššie. Zvýšili sme .col
výplň pomocou .px-md-5
a potom sme tomu zabránili pomocou .mx-md-n5
nadradenej položky .row
.
<div class="row mx-md-n5">
<div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
<div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>