Oghere anya
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 margin
ma ọ 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 .25rem
ruo 3rem
.
Nkọwapụta
Ngwa ime oghere na-emetụta ebe nkwụsịtụ niile, site xs
na 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: 0
na 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 xs
na {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-top
ma ọ bụpadding-top
b
- maka klaasị na setịpụrụmargin-bottom
ma ọ bụpadding-bottom
l
- maka klaasị na setịpụrụmargin-left
ma ọ bụpadding-left
r
- maka klaasị na setịpụrụmargin-right
ma ọ bụpadding-right
x
- maka klaasị nke setịpụrụ ma*-left
na*-right
y
- maka klaasị nke setịpụrụ ma*-top
na*-bottom
- oghere - maka klaasị setịpụrụ
margin
ma ọ bụpadding
n'akụkụ 4 niile nke mmewere
Ebe nha bụ otu n'ime:
0
- maka klaasị na-ewepụmargin
ma ọ bụpadding
site na ịtọ ya0
1
- (site na ndabara) maka klaasị na-edozimargin
ma ọ bụpadding
ka$spacer * .25
2
- (site na ndabara) maka klaasị na-edozimargin
ma ọ bụpadding
ka$spacer * .5
3
- (site na ndabara) maka klaasị na-edozimargin
ma ọ bụpadding
ka$spacer
4
- (site na ndabara) maka klaasị na-edozimargin
ma ọ bụpadding
ka$spacer * 1.5
5
- (site na ndabara) maka klaasị na-edozimargin
ma ọ bụpadding
ka$spacer * 3
auto
- maka klaasị na-ememargin
ka akpaaka
(Ị nwere ike ịgbakwunye nha ndị ọzọ site na ịgbakwunye ndenye na $spacers
mgbanwe 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-auto
klaasị maka ọdịnaya ọkwa mgbochi obosara kwụ n'ahịrị—ya bụ, ọdịnaya nwere display: block
yana width
ntọala—site n'itinye oke ala ka ọ bụrụ auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Oke adịghị mma
Na CSS, margin
akụrụngwa nwere ike iji ụkpụrụ ọjọọ ( padding
enweghị 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 n
tupu 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 .col
padding mụbaa .px-md-5
wee mebie nke ahụ na .mx-md-n5
nne na nna .row
.
<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>