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 paddingnā waiwai i kekahi 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 āpau, a me nā waiwai kū a me ka pae. Kūkulu ʻia nā papa mai kahi palapala Sass paʻamau mai .25remka 3rem.

Notation

ʻO nā pono hana hoʻokaʻawale e pili ana i nā wahi haʻi a pau, mai xska 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: 0a 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 xsa {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 i margin-topʻolepadding-top
b- no nā papa i hoʻonohonoho a i margin-bottomʻolepadding-bottom
l- no nā papa i hoʻonohonoho a i margin-leftʻolepadding-left
r- no nā papa i hoʻonohonoho a i margin-rightʻolepadding-right
x- no nā papa i hoʻonohonoho ʻelua *-lefta*-right
y- no nā papa i hoʻonohonoho ʻelua *-topa*-bottom
blank - no nā papa e hoʻonoho i kahi a i marginʻole paddingma nā ʻaoʻao 4 āpau o ka mea

Aia ka nui o kekahi o:

0- no nā papa e hoʻopau i ka a i marginʻole paddingma ka hoʻonohonoho ʻana iā ia0
1- (ma ka paʻamau) no nā papa i hoʻonohonoho i ka margina paddingi ʻole$spacer * .25
2- (ma ka paʻamau) no nā papa i hoʻonohonoho i ka margina paddingi ʻole$spacer * .5
3- (ma ka paʻamau) no nā papa i hoʻonohonoho i ka margina paddingi ʻole$spacer
4- (ma ka paʻamau) no nā papa i hoʻonohonoho i ka margina paddingi ʻole$spacer * 1.5
5- (ma ka paʻamau) no nā papa i hoʻonohonoho i ka margina paddingi ʻole$spacer * 3
auto- no nā papa i hoʻonohonoho i ka marginauto

(Hiki iā ʻoe ke hoʻohui i nā nui hou aku ma ka hoʻohui ʻana i nā mea hoʻokomo i ka $spacersloli 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-autopapa 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: blocka me kahi widthhoʻonohonoho—ma ka hoʻonohonoho ʻana i nā palena ākea i auto.

ʻElemu waena

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

palena ʻino

Ma CSS, marginhiki i nā waiwai ke hoʻohana i nā waiwai maikaʻi ʻole ( paddingʻaʻole hiki). Ma ka 4.2, ua hoʻohui mākou i nā pono hana palena ʻino no kēlā me kēia nui integer ʻ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ā breakpoints.

Aneane like ka syntax me ka mea paʻamau, nā pono palena maikaʻi, akā me ka hoʻohui ʻana nma 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 .colpadding me .px-md-5a laila kūʻē i kēlā me .mx-md-n5ka makua .row.

Padding kolamu maʻamau

<div class="row mx-md-n5">
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
</div>