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>