Vzdálenost
Bootstrap obsahuje širokou škálu zkráceně reagujících margin a tříd obslužných funkcí pro úpravu vzhledu prvku.
Jak to funguje
Přiřaďte prvku margin
nebo padding
podmnožině jeho stran pomocí zkrácených tříd, resp. Zahrnuje podporu pro jednotlivé vlastnosti, všechny vlastnosti a vertikální a horizontální vlastnosti. Třídy jsou sestaveny z výchozí mapy Sass v rozsahu od .25rem
do 3rem
.
Notový zápis
Obslužné programy pro nastavení mezer, které se vztahují na všechny zarážky, od xs
do xl
, nemají v sobě žádnou zkratku zarážek. Je to proto, že tyto třídy jsou aplikovány od min-width: 0
a výše, a proto nejsou vázány dotazem na média. Zbývající zarážky však obsahují zkratku zarážek.
Třídy jsou pojmenovány pomocí formátu {property}{sides}-{size}
for xs
a {property}{sides}-{breakpoint}-{size}
for sm
, md
, lg
a xl
.
Kde nemovitost je jedna z:
m
- pro třídy, které nastavujímargin
p
- pro třídy, které nastavujípadding
Kde strany je jedna z:
t
- pro třídy, které nastavujímargin-top
popřpadding-top
b
- pro třídy, které nastavujímargin-bottom
popřpadding-bottom
l
- pro třídy, které nastavujímargin-left
popřpadding-left
r
- pro třídy, které nastavujímargin-right
popřpadding-right
x
- pro třídy, které nastavují jak*-left
a*-right
y
- pro třídy, které nastavují jak*-top
a*-bottom
- prázdné - pro třídy, které nastavují a
margin
nebopadding
na všech 4 stranách prvku
Kde velikost je jedna z:
0
- pro třídy, které eliminujímargin
nebopadding
nastavením na0
1
- (ve výchozím nastavení) pro třídy, které nastavujímargin
nebopadding
$spacer * .25
2
- (ve výchozím nastavení) pro třídy, které nastavujímargin
nebopadding
$spacer * .5
3
- (ve výchozím nastavení) pro třídy, které nastavujímargin
nebopadding
$spacer
4
- (ve výchozím nastavení) pro třídy, které nastavujímargin
nebopadding
$spacer * 1.5
5
- (ve výchozím nastavení) pro třídy, které nastavujímargin
nebopadding
$spacer * 3
auto
- pro třídy, které nastavujímargin
na auto
(Další velikosti můžete přidat přidáním položek do $spacers
proměnné mapy Sass.)
Příklady
Zde je několik reprezentativních příkladů těchto tříd:
.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ální centrování
Bootstrap navíc obsahuje také .mx-auto
třídu pro horizontální centrování obsahu na úrovni bloku s pevnou šířkou – tedy obsahu, který má display: block
a width
sadu – nastavením vodorovných okrajů na auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Záporná marže
V CSS mohou margin
vlastnosti využívat záporné hodnoty ( padding
nelze). Od 4.2 jsme přidali nástroje pro zápornou marži pro každou nenulovou celočíselnou velikost uvedenou výše (např. , 1
, 2
, 3
, ). Tyto nástroje jsou ideální pro přizpůsobení žlabů mřížkových sloupů napříč body přerušení.4
5
Syntaxe je téměř stejná jako u výchozích obslužných programů s kladnou marží, ale s přidáním n
před požadovanou velikost. Zde je příklad třídy, která je opakem .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Zde je příklad přizpůsobení mřížky Bootstrap v md
zarážce medium ( ) a výše. Zvýšili jsme .col
výplň pomocí .px-md-5
a poté jsme tomu zabránili pomocí .mx-md-n5
nadřazené 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>