Kaʻawale
Loaʻa i ka Bootstrap kahi ākea ākea o ka palena pane pōkole a me nā papa hana padding e hoʻololi i ke ʻano o kahi mea.
Pehea e hana ai
E hāʻawi i ka pane-aloha a i margin
ʻole padding
nā waiwai i kahi mea a i ʻole kahi ʻāpana o kona mau ʻaoʻao me nā papa pōkole. Loaʻa i ke kākoʻo no kēlā me kēia waiwai, nā waiwai a pau, a me nā waiwai kū a me ka pae. Kūkulu ʻia nā papa mai kahi palapala Sass paʻamau mai .25rem
ka 3rem
.
Notation
ʻO nā pono hana hoʻokaʻawale e pili ana i nā wahi haʻihaʻi a pau, mai xs
ka xl
, ʻaʻohe wahi pōkole i loko o ia mau mea. No ka mea ua hoʻohana ʻia kēlā mau papa mai min-width: 0
a i luna, a no laila ʻaʻole i hoʻopaʻa ʻia e kahi nīnau media. ʻO nā wahi haʻi i koe naʻe, loaʻa i kahi pōkole breakpoint.
Kapa ʻia nā papa me ka hoʻohana ʻana i ke ʻano {property}{sides}-{size}
no xs
a {property}{sides}-{breakpoint}-{size}
no sm
, md
, lg
, a me xl
.
ʻO kahi waiwai kekahi o:
m
- no nā papa i hoʻonohonohomargin
p
- no nā papa i hoʻonohonohopadding
ʻO kahi ʻaoʻao kekahi o:
t
- no nā papa i hoʻonohonoho a imargin-top
ʻolepadding-top
b
- no nā papa i hoʻonohonoho a imargin-bottom
ʻolepadding-bottom
l
- no nā papa i hoʻonohonoho a imargin-left
ʻolepadding-left
r
- no nā papa i hoʻonohonoho a imargin-right
ʻolepadding-right
x
- no nā papa i hoʻonohonoho ʻelua*-left
a*-right
y
- no nā papa i hoʻonohonoho ʻelua*-top
a*-bottom
- blank - no nā papa e hoʻonoho i kahi a i
margin
ʻolepadding
ma nā ʻaoʻao 4 āpau o ka mea
Aia ka nui o kekahi o:
0
- no nā papa e hoʻopau i ka a imargin
ʻolepadding
ma ka hoʻonohonoho ʻana iā ia0
1
- (ma ka paʻamau) no nā papa i hoʻonohonoho i kamargin
apadding
i ʻole$spacer * .25
2
- (ma ka paʻamau) no nā papa i hoʻonohonoho i kamargin
apadding
i ʻole$spacer * .5
3
- (ma ka paʻamau) no nā papa i hoʻonohonoho i kamargin
apadding
i ʻole$spacer
4
- (ma ka paʻamau) no nā papa i hoʻonohonoho i kamargin
apadding
i ʻole$spacer * 1.5
5
- (ma ka paʻamau) no nā papa i hoʻonohonoho i kamargin
apadding
i ʻole$spacer * 3
auto
- no nā papa i hoʻonohonoho i kamargin
auto
(Hiki iā ʻoe ke hoʻohui i nā nui hou aku ma ka hoʻohui ʻana i nā mea hoʻokomo i ka $spacers
loli palapala Sass.)
Nā laʻana
Eia kekahi mau hiʻohiʻona o kēia mau papa:
.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;
}
Ke kikowaena hoʻopololei
Eia hou, ua komo pū ʻo Bootstrap i kahi .mx-auto
papa no ka hoʻonohonoho ʻana i ka maʻiʻo pae ākea paʻa paʻa-ʻo ia hoʻi, ka maʻiʻo i loaʻa display: block
a me kahi width
hoʻonohonoho—ma ka hoʻonohonoho ʻana i nā palena ākea i auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
palena ʻino
Ma CSS, margin
hiki i nā waiwai ke hoʻohana i nā waiwai maikaʻi ʻole ( padding
ʻaʻole hiki). Ma kahi o 4.2, ua hoʻohui mākou i nā pono hana palena ʻino no kēlā me kēia helu helu helu ʻole ʻole i helu ʻia ma luna (e laʻa, 1
, 2
, 3
, 4
, 5
). He kūpono kēia mau pono no ka hoʻopilikino ʻana i nā ʻauwai kolamu ma waena o nā wahi haʻihaʻi.
Aneane like ka syntax me ka mea paʻamau, nā pono palena maikaʻi, akā me ka hoʻohui ʻana n
ma mua o ka nui i noi ʻia. Eia kekahi laʻana papa ʻokoʻa o .mt-1
:
.mt-n1 {
margin-top: -0.25rem !important;
}
Eia kekahi laʻana o ka hoʻopilikino ʻana i ka mākia Bootstrap ma ke kikowaena waena ( md
) breakpoint a ma luna. Ua hoʻonui mākou i ka .col
padding me .px-md-5
a laila kūʻē i kēlā me .mx-md-n5
ka makua .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>