Source

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>

Negativna margina

U CSS-u, marginsvojstva mogu koristiti negativne vrijednosti ( paddingne mogu). Od verzije 4.2, dodali smo negativne margine za svaku veličinu koja nije nula gore navedenu (npr. 1, , 2, 3, 4) 5. Ovi uslužni programi su idealni za prilagođavanje oluka stupaca mreže preko tačaka prekida.

Sintaksa je skoro ista kao zadani, pozitivni uslužni programi margine, ali sa dodatkom nprije tražene veličine. Evo primjera klase koja je suprotna od .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

Evo primjera prilagođavanja Bootstrap mreže na srednjoj ( md) tački prekida i iznad. Povećali smo .colpadding sa .px-md-5, a zatim smo to suprotstavili sa .mx-md-n5na roditeljskom .row.

Prilagođeni padding kolone

<div class="row mx-md-n5">
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
</div>