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 margin
ili padding
vrijednosti 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 .25rem
do 3rem
.
Notacija
Uslužni programi za razmak koji se primjenjuju na sve tačke prekida, od xs
do xl
, nemaju skraćenicu za tačku prekida. To je zato što se te klase primjenjuju od min-width: 0
i 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 xs
i {property}{sides}-{breakpoint}-{size}
za sm
, md
, lg
i 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 postavljamargin-top
ilipadding-top
b
- za nastavu koja postavljamargin-bottom
ilipadding-bottom
l
- za nastavu koja postavljamargin-left
ilipadding-left
r
- za nastavu koja postavljamargin-right
ilipadding-right
x
- za klase koje postavljaju oba*-left
i*-right
y
- za klase koje postavljaju oba*-top
i*-bottom
- prazno - za klase koje postavljaju a
margin
ilipadding
na sve 4 strane elementa
Gdje je veličina jedna od:
0
- za klase koje eliminišumargin
ilipadding
postavljanjem na0
1
- (podrazumevano) za klase koje postavljajumargin
ilipadding
na$spacer * .25
2
- (podrazumevano) za klase koje postavljajumargin
ilipadding
na$spacer * .5
3
- (podrazumevano) za klase koje postavljajumargin
ilipadding
na$spacer
4
- (podrazumevano) za klase koje postavljajumargin
ilipadding
na$spacer * 1.5
5
- (podrazumevano) 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 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-auto
klasu za horizontalno centriranje sadržaja na nivou bloka fiksne širine – odnosno sadržaja koji ima display: block
i width
skup – postavljanjem horizontalnih 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 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 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 Bootstrap mreže na srednjoj ( md
) tački prekida i iznad. Povećali smo .col
padding sa .px-md-5
, a zatim smo to suprotstavili sa .mx-md-n5
na roditeljskom .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>