oghere

Bootstrap na-agụnye akụkụ dị iche iche na-anabata mkpirisi na klaasị ịba uru iji gbanwee ọdịdị ihe.

Ka o si arụ ọrụ

Kenye anabata-enyi na enyi marginma ọ bụ paddingụkpụrụ na mmewere ma ọ bụ akụkụ nke akụkụ ya nwere klaasị mkpirisi. Gụnyere nkwado maka akụrụngwa onye ọ bụla, akụrụngwa niile, yana ihe kwụ ọtọ na kwụ ọtọ. Ewubere klaasị site na maapụ Sass ndabara sitere na .25remruo 3rem.

Nkọwapụta

Ngwa ime oghere na-emetụta ebe nkwụsịtụ niile, site xsna ruo xl, enweghị mbiri ntụpọ nkwụsịtụ n'ime ha. Nke a bụ n'ihi na a na-etinye klaasị ndị ahụ site min-width: 0na elu, yabụ na ajụjụ mgbasa ozi ejighị ya. Otú ọ dị, ebe nkwụsịtụ fọdụrụ na-agụnye mbiri nkebi nkwụsịtụ.

A na-akpọ klaasị ahụ site na iji usoro {property}{sides}-{size}maka xsna {property}{sides}-{breakpoint}-{size}maka sm, md, lg, na xl.

Ebe ihe onwunwe bụ otu n'ime:

m- maka klaasị nke setịpụrụmargin
p- maka klaasị nke setịpụrụpadding

Ebe akụkụ bụ otu n'ime:

t- maka klaasị na setịpụrụ margin-topma ọ bụpadding-top
b- maka klaasị na setịpụrụ margin-bottomma ọ bụpadding-bottom
l- maka klaasị na setịpụrụ margin-leftma ọ bụpadding-left
r- maka klaasị na setịpụrụ margin-rightma ọ bụpadding-right
x- maka klaasị nke setịpụrụ ma *-leftna*-right
y- maka klaasị nke setịpụrụ ma *-topna*-bottom
oghere - maka klaasị setịpụrụ marginma ọ bụ paddingn'akụkụ 4 niile nke mmewere

Ebe nha bụ otu n'ime:

0- maka klaasị na-ewepụ marginma ọ bụ paddingsite na ịtọ ya0
1- (site na ndabara) maka klaasị na-edozi marginma ọ bụ paddingka$spacer * .25
2- (site na ndabara) maka klaasị na-edozi marginma ọ bụ paddingka$spacer * .5
3- (site na ndabara) maka klaasị na-edozi marginma ọ bụ paddingka$spacer
4- (site na ndabara) maka klaasị na-edozi marginma ọ bụ paddingka$spacer * 1.5
5- (site na ndabara) maka klaasị na-edozi marginma ọ bụ paddingka$spacer * 3
auto- maka klaasị na-eme marginka akpaaka

(Ị nwere ike ịgbakwunye nha ndị ọzọ site na ịgbakwunye ndenye na $spacersmgbanwe maapụ Sass.)

Ihe atụ

Nke a bụ ọmụmaatụ ụfọdụ ihe atụ nke klaasị ndị a:

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

N'etiti kwụ ọtọ

Na mgbakwunye, Bootstrap gụnyekwara .mx-autoklaasị maka ọdịnaya ọkwa mgbochi obosara kwụ n'ahịrị—ya bụ, ọdịnaya nwere display: blockyana widthntọala—site n'itinye oke ala ka ọ bụrụ auto.

Ihe etiti etiti

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

Oke adịghị mma

Na CSS, marginakụrụngwa nwere ike iji ụkpụrụ ọjọọ ( paddingenweghị ike). Dịka nke 4.2, anyị agbakwunyela akụrụngwa oke na-adịghị mma maka nha integer ọ bụla na-abụghị efu edepụtara n'elu (dịka ọmụmaatụ, 1, 2, 3, 4, 5). Ngwa ndị a dị mma maka ịhazi gọọlụ grid gafee ebe nkwụsịtụ.

Syntax ahụ fọrọ nke nta ka ọ bụrụ otu ihe ndabara, akụrụngwa oke oke dị mma, mana yana mgbakwunye nke ntupu nha achọrọ. Nke a bụ klas ihe atụ nke na-emegide ya .mt-1:

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

Nke a bụ ọmụmaatụ ịhazi grid Bootstrap na ebe nkwụsịtụ ( md) na n'elu. Anyị ejirila .colpadding mụbaa .px-md-5wee mebie nke ahụ na .mx-md-n5nne na nna .row.

padding kọlụm omenala

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