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>

Negativna margina

U CSS-u marginsvojstva mogu koristiti negativne vrijednosti ( paddingne mogu). Od verzije 4.2, dodali smo pomoćne programe negativne margine za svaku veličinu cijelog broja različitu od nule navedenu iznad (npr., 1, 2, 3, 4, 5). Ovi uslužni programi idealni su za prilagodbu oluka mrežnih stupaca preko prijelomnih točaka.

Sintaksa je gotovo ista kao kod zadanih uslužnih programa pozitivne margine, ali s 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 mreže Bootstrap na srednjoj ( md) prijelomnoj točki i više. Povećali smo .colispunu pomoću .px-md-5i zatim to poništili pomoću .mx-md-n5na roditelju .row.

Prilagođeno punjenje stupaca

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