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 marginnebo paddingpodmnož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 .25remdo 3rem.

Notový zápis

Obslužné programy pro nastavení mezer, které se vztahují na všechny zarážky, od xsdo xl, nemají v sobě žádnou zkratku zarážek. Je to proto, že tyto třídy jsou aplikovány od min-width: 0a 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 xsa {property}{sides}-{breakpoint}-{size}for sm, md, lga 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-toppopřpadding-top
• b- pro třídy, které nastavují margin-bottompopřpadding-bottom
• l- pro třídy, které nastavují margin-leftpopřpadding-left
• r- pro třídy, které nastavují margin-rightpopřpadding-right
• x- pro třídy, které nastavují jak *-lefta*-right
• y- pro třídy, které nastavují jak *-topa*-bottom
• prázdné - pro třídy, které nastavují a marginnebo paddingna všech 4 stranách prvku

Kde velikost je jedna z:

• 0- pro třídy, které eliminují marginnebo paddingnastavením na0
• 1- (ve výchozím nastavení) pro třídy, které nastavují marginnebopadding$spacer * .25
• 2- (ve výchozím nastavení) pro třídy, které nastavují marginnebopadding$spacer * .5
• 3- (ve výchozím nastavení) pro třídy, které nastavují marginnebopadding$spacer
• 4- (ve výchozím nastavení) pro třídy, které nastavují marginnebopadding$spacer * 1.5
• 5- (ve výchozím nastavení) pro třídy, které nastavují marginnebopadding$spacer * 3
• auto- pro třídy, které nastavují marginna auto

(Další velikosti můžete přidat přidáním položek do $spacerspromě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-autotřídu pro horizontální centrování obsahu na úrovni bloku s pevnou šířkou – tedy obsahu, který má display: blocka widthsadu – nastavením vodorovných okrajů na auto.

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>