Razmak

Bootstrap uključuje širok raspon uslužnih klasa margina koje reaguju na stenografiju i dopune za promjenu izgleda elementa.

Kako radi

Dodijelite prilagođene marginili paddingvrijednosti elementu ili podskupu njegovih strana sa skraćenim klasama. Uključuje podršku za pojedinačna svojstva, sva svojstva i vertikalna i horizontalna svojstva. Klase su izgrađene od zadane Sass mape u rasponu od .25remdo 3rem.

Notacija

Uslužni programi za razmak koji se primjenjuju na sve tačke prekida, od xsdo xl, nemaju skraćenicu za tačku prekida. To je zato što se te klase primjenjuju od min-width: 0i naviše i stoga nisu vezane medijskim upitom. Preostale tačke prekida, međutim, uključuju skraćenicu tačke prekida.

Klase su imenovane koristeći format {property}{sides}-{size}za xsi {property}{sides}-{breakpoint}-{size}za sm, md, lgi xl.

Gdje je imovina jedno od:

m- za nastavu koja je postavljenamargin
p- za nastavu koja je postavljenapadding

Gdje je strana jedna od:

t- za nastavu koja postavlja margin-topilipadding-top
b- za nastavu koja postavlja margin-bottomilipadding-bottom
l- za nastavu koja postavlja margin-leftilipadding-left
r- za nastavu koja postavlja margin-rightilipadding-right
x- za klase koje postavljaju oba *-lefti*-right
y- za klase koje postavljaju oba *-topi*-bottom
prazno - za klase koje postavljaju a marginili paddingna sve 4 strane elementa

Gdje je veličina jedna od:

0- za klase koje eliminišu marginili paddingpostavljanjem na0
1- (podrazumevano) za klase koje postavljaju marginili paddingna$spacer * .25
2- (podrazumevano) za klase koje postavljaju marginili paddingna$spacer * .5
3- (podrazumevano) za klase koje postavljaju marginili paddingna$spacer
4- (podrazumevano) za klase koje postavljaju marginili paddingna$spacer * 1.5
5- (podrazumevano) 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 mape 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

Uz to, Bootstrap također uključuje .mx-autoklasu za horizontalno centriranje sadržaja na nivou bloka fiksne širine – odnosno sadržaja koji ima display: blocki widthskup – postavljanjem horizontalnih margina na auto.

Centrirani element

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