Razmak

Bootstrap uključuje širok raspon stenografskih responzivnih margina i korisnih klasa za popunjavanje za izmjenu izgleda elementa.

Kako radi

Dodijelite prilagođene vrijednosti marginili paddingvrijednosti elementu ili podskupu njegovih strana pomoću skraćenih klasa. Uključuje podršku za pojedinačna svojstva, sva svojstva te okomita i vodoravna svojstva. Klase su izgrađene od zadane Sass mape u rasponu od .25remdo 3rem.

Notacija

Pomoćni programi za razmake koji se primjenjuju na sve prijelomne točke, od xsdo xl, u sebi nemaju kraticu prijelomne točke. To je zato što se te klase primjenjuju od min-width: 0i prema gore i stoga nisu vezane medijskim upitom. Međutim, preostale prijelomne točke uključuju kraticu prijelomne točke.

Klase su imenovane u formatu {property}{sides}-{size}za xsi {property}{sides}-{breakpoint}-{size}za sm, md, lgi xl.

Kada je vlasništvo jedno od:

m- za klase koje skupmargin
p- za klase koje skuppadding

Gdje su strane jedno od:

t- za razrede koji postavljaju margin-topodnpadding-top
b- za razrede koji postavljaju margin-bottomodnpadding-bottom
l- za razrede koji postavljaju margin-leftodnpadding-left
r- za razrede koji postavljaju margin-rightodnpadding-right
x- za klase koje postavljaju i *-lefti*-right
y- za klase koje postavljaju i *-topi*-bottom
prazno - za klase koje postavljaju a marginili paddingna sve 4 strane elementa

Gdje je veličina jedno od sljedećeg:

0- za klase koje eliminiraju marginili paddingpostavljanjem na0
1- (prema zadanim postavkama) za klase koje postavljaju marginili paddingna$spacer * .25
2- (prema zadanim postavkama) za klase koje postavljaju marginili paddingna$spacer * .5
3- (prema zadanim postavkama) za klase koje postavljaju marginili paddingna$spacer
4- (prema zadanim postavkama) za klase koje postavljaju marginili paddingna$spacer * 1.5
5- (prema zadanim postavkama) za klase koje postavljaju marginili paddingna$spacer * 3
auto- za klase koje postavljaju marginna auto

(Možete dodati više veličina dodavanjem unosa u $spacersvarijablu karte Sass.)

Primjeri

Evo nekoliko reprezentativnih primjera ovih klasa:

.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;
}

Horizontalno centriranje

Osim toga, Bootstrap također uključuje .mx-autoklasu za vodoravno centriranje sadržaja na razini bloka fiksne širine—to jest, sadržaja koji ima display: blocki widthskup—postavljanjem vodoravnih margina na auto.

Centrirani element

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