Vzdálenost
Bootstrap obsahuje širokou škálu zkráceně reagující třídy margin, padding a gap pro úpravu vzhledu prvku.
Okraj a výplň
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
.
Používáte modul rozložení mřížky CSS? Zvažte použití nástroje gap .
Notový zápis
Obslužné programy pro nastavení mezer, které se vztahují na všechny zarážky, od xs
do xxl
, 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
, xl
a xxl
.
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
s
- (start) pro třídy, které nastavujímargin-left
nebopadding-left
v LTR,margin-right
nebopadding-right
v RTLe
- (end) pro třídy, které nastavujímargin-right
nebopadding-right
v LTR,margin-left
nebopadding-left
v RTLx
- 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;
}
.ms-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). Tyto záporné okraje jsou ve výchozím nastavení zakázány , ale lze je povolit v Sass nastavením $enable-negative-margins: true
.
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;
}
Mezera
Při použití display: grid
, můžete využít gap
nástroje na nadřazeném mřížkovém kontejneru. To může ušetřit nutnost přidávat nástroje pro okraje k jednotlivým položkám mřížky (děti display: grid
kontejneru). Gap utility ve výchozím nastavení reagují a jsou generovány prostřednictvím našeho API utilit na základě $spacers
mapy Sass.
<div class="d-grid gap-3">
<div class="p-2 bg-light border">Grid item 1</div>
<div class="p-2 bg-light border">Grid item 2</div>
<div class="p-2 bg-light border">Grid item 3</div>
</div>
Podpora zahrnuje responzivní možnosti pro všechny zarážky mřížky Bootstrapu a také šest velikostí z $spacers
mapy ( 0
– 5
). Neexistuje žádná .gap-auto
pomocná třída, protože je v podstatě stejná jako .gap-0
.
Sass
Mapy
Nástroje pro rozestupy jsou deklarovány prostřednictvím mapy Sass a poté generovány pomocí našeho rozhraní API pro nástroje.
$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);
Utility API
Nástroje pro vytváření mezer jsou deklarovány v našem rozhraní API pro nástroje v scss/_utilities.scss
. Naučte se používat rozhraní API utilit.
"margin": (
responsive: true,
property: margin,
class: m,
values: map-merge($spacers, (auto: auto))
),
"margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: map-merge($spacers, (auto: auto))
),
"margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: map-merge($spacers, (auto: auto))
),
"margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: map-merge($spacers, (auto: auto))
),
"margin-end": (
responsive: true,
property: margin-right,
class: me,
values: map-merge($spacers, (auto: auto))
),
"margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: map-merge($spacers, (auto: auto))
),
"margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: map-merge($spacers, (auto: auto))
),
// Negative margin utilities
"negative-margin": (
responsive: true,
property: margin,
class: m,
values: $negative-spacers
),
"negative-margin-x": (
responsive: true,
property: margin-right margin-left,
class: mx,
values: $negative-spacers
),
"negative-margin-y": (
responsive: true,
property: margin-top margin-bottom,
class: my,
values: $negative-spacers
),
"negative-margin-top": (
responsive: true,
property: margin-top,
class: mt,
values: $negative-spacers
),
"negative-margin-end": (
responsive: true,
property: margin-right,
class: me,
values: $negative-spacers
),
"negative-margin-bottom": (
responsive: true,
property: margin-bottom,
class: mb,
values: $negative-spacers
),
"negative-margin-start": (
responsive: true,
property: margin-left,
class: ms,
values: $negative-spacers
),
// Padding utilities
"padding": (
responsive: true,
property: padding,
class: p,
values: $spacers
),
"padding-x": (
responsive: true,
property: padding-right padding-left,
class: px,
values: $spacers
),
"padding-y": (
responsive: true,
property: padding-top padding-bottom,
class: py,
values: $spacers
),
"padding-top": (
responsive: true,
property: padding-top,
class: pt,
values: $spacers
),
"padding-end": (
responsive: true,
property: padding-right,
class: pe,
values: $spacers
),
"padding-bottom": (
responsive: true,
property: padding-bottom,
class: pb,
values: $spacers
),
"padding-start": (
responsive: true,
property: padding-left,
class: ps,
values: $spacers
),