Spazjar
Bootstrap jinkludi firxa wiesgħa ta' klassijiet ta' marġni ta' rispons shorthand u ta' utilità għall-ikkuttunar biex timmodifika d-dehra ta' element.
Kif taħdem
Assenja responsive-friendly margin
jew padding
valuri lil element jew subsett tal-ġnub tiegħu bi klassijiet shorthand. Jinkludi appoġġ għall-proprjetajiet individwali, il-proprjetajiet kollha, u l-proprjetajiet vertikali u orizzontali. Il-klassijiet huma mibnija minn mappa Sass default li tvarja minn .25rem
sa 3rem
.
Notazzjoni
L-utilitajiet tal-ispazjar li japplikaw għall-punti ta' waqfien kollha, minn xs
sa xl
, m'għandhom l-ebda abbrevjazzjoni tal-punt ta' waqfien fihom. Dan għaliex dawk il-klassijiet huma applikati minn min-width: 0
u 'l fuq, u għalhekk mhumiex marbuta b'interrogazzjoni tal-midja. Il-punti ta' waqfien li jifdal, madankollu, jinkludu abbrevjazzjoni ta' breakpoint.
Il-klassijiet huma msemmija bl-użu tal-format {property}{sides}-{size}
għal xs
u {property}{sides}-{breakpoint}-{size}
għal sm
, md
, lg
, u xl
.
Fejn il-proprjetà hija waħda minn:
m
- għal klassijiet li jistabbilixxumargin
p
- għal klassijiet li jistabbilixxupadding
Fejn il -ġnub huwa wieħed minn:
t
- għal klassijiet li jistabbilixxumargin-top
jewpadding-top
b
- għal klassijiet li jistabbilixxumargin-bottom
jewpadding-bottom
l
- għal klassijiet li jistabbilixxumargin-left
jewpadding-left
r
- għal klassijiet li jistabbilixxumargin-right
jewpadding-right
x
- għal klassijiet li jistabbilixxu kemm*-left
u*-right
y
- għal klassijiet li jistabbilixxu kemm*-top
u*-bottom
- vojt - għal klassijiet li jistabbilixxu a
margin
jewpadding
fuq l-4 naħat kollha tal-element
Fejn id- daqs huwa wieħed minn:
0
- għal klassijiet li jeliminaw il-margin
jewpadding
billi jistabbilixxuh għal0
1
- (b'mod awtomatiku) għal klassijiet li jistabbilixxumargin
jewpadding
għal$spacer * .25
2
- (b'mod awtomatiku) għal klassijiet li jistabbilixxumargin
jewpadding
għal$spacer * .5
3
- (b'mod awtomatiku) għal klassijiet li jistabbilixxumargin
jewpadding
għal$spacer
4
- (b'mod awtomatiku) għal klassijiet li jistabbilixxumargin
jewpadding
għal$spacer * 1.5
5
- (b'mod awtomatiku) għal klassijiet li jistabbilixxumargin
jewpadding
għal$spacer * 3
auto
- għal klassijiet li jissettjaw il-margin
għal auto
(Tista 'żżid aktar daqsijiet billi żżid entrati mal- $spacers
varjabbli tal-mappa Sass.)
Eżempji
Hawn huma xi eżempji rappreżentattivi ta’ dawn il-klassijiet:
.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;
}
Centering orizzontali
Barra minn hekk, Bootstrap jinkludi wkoll .mx-auto
klassi biex iċċentra orizzontalment il-kontenut tal-livell tal-blokk b'wisa 'fiss—jiġifieri, kontenut li għandu display: block
u width
sett—billi jiġu stabbiliti l-marġini orizzontali għal auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Marġini negattiv
Fis-CSS, il- margin
proprjetajiet jistgħu jutilizzaw valuri negattivi ( padding
ma jistgħux). Minn 4.2, żidna utilitajiet ta' marġini negattivi għal kull daqs sħiħ mhux żero elenkat hawn fuq (eż., 1
, 2
, 3
, 4
, 5
). Dawn l-utilitajiet huma ideali għall-personalizzazzjoni tal-kanal tal-kolonna tal-grilja madwar breakpoints.
Is-sintassi hija kważi l-istess bħall-utilitajiet tal-marġini pożittivi default, iżda biż-żieda ta ' n
qabel id-daqs mitlub. Hawnhekk hawn eżempju ta 'klassi li hija l-oppost ta' .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Hawn eżempju ta 'personalizzazzjoni tal-grilja Bootstrap fil-punt ta' md
waqfa medju ( ) u 'l fuq. Żidna l- .col
ikkuttunar bi .px-md-5
u mbagħad ikkontrobattajna dak bil .mx-md-n5
-ġenitur .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>