Source

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 marginjew paddingvaluri 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 .25remsa 3rem.

Notazzjoni

L-utilitajiet tal-ispazjar li japplikaw għall-punti ta' waqfien kollha, minn xssa xl, m'għandhom l-ebda abbrevjazzjoni tal-punt ta' waqfien fihom. Dan għaliex dawk il-klassijiet huma applikati minn min-width: 0u '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 xsu {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 jistabbilixxu margin-topjewpadding-top
b- għal klassijiet li jistabbilixxu margin-bottomjewpadding-bottom
l- għal klassijiet li jistabbilixxu margin-leftjewpadding-left
r- għal klassijiet li jistabbilixxu margin-rightjewpadding-right
x- għal klassijiet li jistabbilixxu kemm *-leftu*-right
y- għal klassijiet li jistabbilixxu kemm *-topu*-bottom
vojt - għal klassijiet li jistabbilixxu a marginjew paddingfuq l-4 naħat kollha tal-element

Fejn id- daqs huwa wieħed minn:

0- għal klassijiet li jeliminaw il- marginjew paddingbilli jistabbilixxuh għal0
1- (b'mod awtomatiku) għal klassijiet li jistabbilixxu marginjew paddinggħal$spacer * .25
2- (b'mod awtomatiku) għal klassijiet li jistabbilixxu marginjew paddinggħal$spacer * .5
3- (b'mod awtomatiku) għal klassijiet li jistabbilixxu marginjew paddinggħal$spacer
4- (b'mod awtomatiku) għal klassijiet li jistabbilixxu marginjew paddinggħal$spacer * 1.5
5- (b'mod awtomatiku) għal klassijiet li jistabbilixxu marginjew paddinggħal$spacer * 3
auto- għal klassijiet li jissettjaw il- margingħal auto

(Tista 'żżid aktar daqsijiet billi żżid entrati mal- $spacersvarjabbli 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-autoklassi biex iċċentra orizzontalment il-kontenut tal-livell tal-blokk b'wisa 'fiss—jiġifieri, kontenut li għandu display: blocku widthsett—billi jiġu stabbiliti l-marġini orizzontali għal auto.

Element iċċentrat

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

Marġini negattiv

Fis-CSS, il- marginproprjetajiet jistgħu jutilizzaw valuri negattivi ( paddingma 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 ' nqabel 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' mdwaqfa medju ( ) u 'l fuq. Żidna l- .colikkuttunar bi .px-md-5u mbagħad ikkontrobattajna dak bil .mx-md-n5-ġenitur .row.

Kuttunar tal-kolonna apposta

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