Source

Isikhala

I-Bootstrap ifaka phakathi uhla olubanzi lwemajini esabelayo yesandla esifushane kanye namakilasi ensiza ye-padding ukuze kulungiswe ukubukeka kwento.

Isebenza kanjani

Nikeza okusabelayo okunobungane marginnoma paddingamanani kusici noma isethi engaphansi yezinhlangothi zayo ezinezigaba ezimfishane. Kufaka phakathi ukusekelwa kwezakhiwo ezingazodwana, zonke izakhiwo, kanye nezakhiwo eziqondile nezivundlile. Amakilasi akhiwe kusuka kumephu ye-Sass ezenzakalelayo ukusuka .25remku- 3rem.

Isaziso

Izinsiza zokuhlukanisa ezisebenza kuwo wonke ama-breakpoint, ukusuka xskuye ukuya ku- xl, azinaso isifinyezo se-breakpoint kuzo. Lokhu kungenxa yokuthi lawo makilasi asetshenziswa ukusuka min-width: 0naphezulu, futhi ngaleyo ndlela awaboshiwe umbuzo wemidiya. Ama-breakpoint asele, nokho, afaka isifinyezo se-breakpoint.

Amakilasi aqanjwe kusetshenziswa ifomethi {property}{sides}-{size}yokuthi xs, , , kanye .{property}{sides}-{breakpoint}-{size}smmdlgxl

Lapho impahla ingenye ye:

  • m- amakilasi asethiwemargin
  • p- amakilasi asethiwepadding

Lapho izinhlangothi zingenye yalezi:

  • t- amakilasi abeka margin-topnomapadding-top
  • b- amakilasi abeka margin-bottomnomapadding-bottom
  • l- amakilasi abeka margin-leftnomapadding-left
  • r- amakilasi abeka margin-rightnomapadding-right
  • x- amakilasi asetha kokubili *-leftfuthi*-right
  • y- amakilasi asetha kokubili *-topfuthi*-bottom
  • blank - amakilasi asetha i-a marginnoma paddingkuzo zonke izinhlangothi ezi-4 zesici

Lapho usayizi ungomunye walokhu:

  • 0- amakilasi asusa marginnoma paddingngokuyibeka kuwo0
  • 1- (ngokuzenzakalelayo) kumakilasi asetha i- marginnoma paddingku$spacer * .25
  • 2- (ngokuzenzakalelayo) kumakilasi asetha i- marginnoma paddingku$spacer * .5
  • 3- (ngokuzenzakalelayo) kumakilasi asetha i- marginnoma paddingku$spacer
  • 4- (ngokuzenzakalelayo) kumakilasi asetha i- marginnoma paddingku$spacer * 1.5
  • 5- (ngokuzenzakalelayo) kumakilasi asetha i- marginnoma paddingku$spacer * 3
  • auto- kumakilasi asetha okuthi marginokuzenzakalelayo

(Ungangeza osayizi abengeziwe ngokungeza okufakiwe $spacerskokuhluka kwemephu ye-Sass.)

Izibonelo

Nazi ezinye izibonelo ezimele lawa makilasi:

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

I-Horizontal centering

Ukwengeza, i-Bootstrap iphinde ihlanganise .mx-autonekilasi lokumisa phakathi nendawo okuqukethwe kwezinga lebhulokhi enobubanzi obungashintshi—okungukuthi, okuqukethwe okunayo display: blockkanye widthnesethi—ngokusetha amamajini avundlile ukuze auto.

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