Source

Izithuba

I-Bootstrap ibandakanya uluhlu olubanzi lwe-shorthand ephendulayo ephendulayo kunye neeklasi eziluncedo zokuguqula ukuguqula inkangeleko yento.

Ingaba isebenza kanjani

Yabela i-responsive-friendly marginor paddingvalues to element or subset of its sides neeclasses shorthand. Ibandakanya inkxaso yeepropati zomntu ngamnye, zonke iipropati, kunye neepropati ezithe nkqo nezithe tye. Iiklasi zakhiwe ukusuka kwimephu ye-Sass engagqibekanga ukusuka .25remkwi 3rem.

Ukuphawula

Izithuba zemisebenzi ezisebenza kuzo zonke iindawo zokuqhawula, ukusuka xsukuya ukuya xl, azinazifinyezo zebreakpoint kuzo. Oku kungenxa yokuba ezo klasi zisetyenziswa ukusuka min-width: 0nangaphezulu, kwaye ke azibotshwanga ngumbuzo wemidiya. Ii-breakpoints ezishiyekileyo, nangona kunjalo, zibandakanya isifinyezo se-breakpoint.

Iiklasi zithiywe kusetyenziswa ifomathi {property}{sides}-{size}ye xskunye {property}{sides}-{breakpoint}-{size}ne sm, md, lg, kunye xl.

Apho ipropati yenye ye:

m- kwiiklasi ezibekamargin
p- kwiiklasi ezibekapadding

Apho amacala yenye ye:

t- kwiiklasi ezibeka margin-topokanyepadding-top
b- kwiiklasi ezibeka margin-bottomokanyepadding-bottom
l- kwiiklasi ezibeka margin-leftokanyepadding-left
r- kwiiklasi ezibeka margin-rightokanyepadding-right
x- kwiiklasi ezibeka zombini *-leftkunye*-right
y- kwiiklasi ezibeka zombini *-topkunye*-bottom
blank - kwiiklasi ezicwangcisa i marginokanye paddingkuwo onke amacala ama-4 ento

Apho ubukhulu buyenye ye:

0- kwiiklasi ezisusa marginokanye paddingngokuyicwangcisa0
1- (ngokungagqibekanga) kwiiklasi ezicwangcisa i marginokanye paddingukuya$spacer * .25
2- (ngokungagqibekanga) kwiiklasi ezicwangcisa i marginokanye paddingukuya$spacer * .5
3- (ngokungagqibekanga) kwiiklasi ezicwangcisa i marginokanye paddingukuya$spacer
4- (ngokungagqibekanga) kwiiklasi ezicwangcisa i marginokanye paddingukuya$spacer * 1.5
5- (ngokungagqibekanga) kwiiklasi ezicwangcisa i marginokanye paddingukuya$spacer * 3
auto- kwiiklasi eziseta i- marginauto

(Unokongeza ubungakanani obungakumbi ngokongeza amangeno $spacerskuguquko lwemephu ye-Sass.)

Imizekelo

Nantsi eminye imizekelo emele ezi klasi:

.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;
}

Ukuzinzisa okuthe tye

Ukongezelela, i-Bootstrap ikwabandakanya .mx-autoiklasi yokumisa i-horizontally centering blocked-width wide-fixed content level-oko kukuthi, umxholo onawo display: blockkunye widthnesethi-ngokubeka imida ethe tye ukuya auto.

Isiqalelo esisembindini

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

Umda ongalunganga

Kwi-CSS, marginiipropathi zinokusebenzisa amaxabiso angalunganga ( paddingawanako). Ukusukela ngo-4.2, songeze izinto ezingalunganga zomda wesayizi nganye engeyo-zero epheleleyo edweliswe ngasentla (umz., 1, 2, 3, 4, 5). Ezi zixhobo zilungele ukwenza ngokwezifiso iigutter zekholamu zegridi kuzo zonke iindawo zokuphumla.

I-syntax iphantse yafana nokungagqibekanga, izinto eziluncedo zomda, kodwa ngokongezwa nkwangaphambi kobungakanani obuceliweyo. Nanku umzekelo weklasi ochaseneyo .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

Nanku umzekelo wokwenza ngokusesikweni igridi yeBootstrap kwindawo ephakathi ( md) yebreakpoint nangaphezulu. Siye sanyusa i- .colpadding kunye .px-md-5kwaye saphinda sayichasa loo .mx-md-n5nto ngomzali .row.

Custom column padding

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