Razmak
Bootstrap uključuje širok raspon stenografskih responzivnih margina i korisnih klasa za popunjavanje za izmjenu izgleda elementa.
Kako radi
Dodijelite prilagođene vrijednosti margin
ili padding
vrijednosti 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 .25rem
do 3rem
.
Notacija
Pomoćni programi za razmake koji se primjenjuju na sve prijelomne točke, od xs
do xl
, u sebi nemaju kraticu prijelomne točke. To je zato što se te klase primjenjuju od min-width: 0
i 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 xs
i {property}{sides}-{breakpoint}-{size}
za sm
, md
, lg
i 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 postavljajumargin-top
odnpadding-top
b
- za razrede koji postavljajumargin-bottom
odnpadding-bottom
l
- za razrede koji postavljajumargin-left
odnpadding-left
r
- za razrede koji postavljajumargin-right
odnpadding-right
x
- za klase koje postavljaju i*-left
i*-right
y
- za klase koje postavljaju i*-top
i*-bottom
- prazno - za klase koje postavljaju a
margin
ilipadding
na sve 4 strane elementa
Gdje je veličina jedno od sljedećeg:
0
- za klase koje eliminirajumargin
ilipadding
postavljanjem na0
1
- (prema zadanim postavkama) za klase koje postavljajumargin
ilipadding
na$spacer * .25
2
- (prema zadanim postavkama) za klase koje postavljajumargin
ilipadding
na$spacer * .5
3
- (prema zadanim postavkama) za klase koje postavljajumargin
ilipadding
na$spacer
4
- (prema zadanim postavkama) za klase koje postavljajumargin
ilipadding
na$spacer * 1.5
5
- (prema zadanim postavkama) za klase koje postavljajumargin
ilipadding
na$spacer * 3
auto
- za klase koje postavljajumargin
na auto
(Možete dodati više veličina dodavanjem unosa u $spacers
varijablu 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-auto
klasu za vodoravno centriranje sadržaja na razini bloka fiksne širine—to jest, sadržaja koji ima display: block
i width
skup—postavljanjem vodoravnih margina na auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Negativna margina
U CSS-u margin
svojstva mogu koristiti negativne vrijednosti ( padding
ne 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 n
prije 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 .col
ispunu pomoću .px-md-5
i zatim to poništili pomoću .mx-md-n5
na roditelju .row
.
<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>