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ážky. 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}pro xsa {property}{sides}-{breakpoint}-{size}pro 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í *-lefti*-right
y- pro třídy, které nastavují *-topi*-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.

Středový prvek

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

Záporná marže

V CSS mohou marginvlastnosti využívat záporné hodnoty ( paddingnelze). Od verze 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í.45

Syntaxe je téměř stejná jako u výchozích obslužných programů s kladnou marží, ale s přidáním npř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 mdzarážce medium ( ) a výše. Zvýšili jsme .colvýplň pomocí .px-md-5a poté jsme tomu zabránili pomocí .mx-md-n5nadřazené položky .row.

Vlastní výplň sloupců

<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>