Isikhala

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

Isebenza kanjani

Nikeza ukusabela 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 zokubeka izikhala 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>

Imajini enegethivu

Ku-CSS, marginizakhiwo zingasebenzisa amanani angalungile ( paddingangeke). Kusukela ngo-4.2, sengeze izinsiza zemajini ezinegethivu kuwo wonke usayizi wezinombolo ezingewona uziro osohlwini olungenhla (isb, 1, 2, 3, 4, 5). Lezi zinsiza zilungele ukwenza ngendlela oyifisayo ama-gutter ekholomu yegridi kuwo wonke ama-breakpoint.

I-syntax icishe ifane nokuzenzakalelayo, izinsiza zemajini ephozithivu, kodwa ngokwengezwa nkwangaphambi kosayizi oceliwe. Nasi ikilasi lesibonelo eliphambene ne- .mt-1:

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

Nasi isibonelo sokwenza ngendlela oyifisayo igridi ye-Bootstrap endaweni yokuphumula emaphakathi ( md) nangaphezulu. Sikhuphule i- .colpadding nge .px-md-5bese siphikisana nalokho .mx-md-n5ngomzali .row.

Ukupheda kwekholomu ngokwezifiso

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