Spacing

Kasama sa Bootstrap ang isang malawak na hanay ng mga shorthand responsive margin at mga klase ng utility ng padding upang baguhin ang hitsura ng isang elemento.

Paano ito gumagana

Magtalaga ng tumutugon-friendly margino paddingmga halaga sa isang elemento o isang subset ng mga panig nito na may mga klase ng shorthand. May kasamang suporta para sa mga indibidwal na property, lahat ng property, at vertical at horizontal property. Binuo ang mga klase mula sa isang default na mapa ng Sass mula .25remhanggang 3rem.

Notasyon

Ang mga spacing utilities na nalalapat sa lahat ng breakpoint, mula xshanggang xl, ay walang pagdadaglat ng breakpoint sa mga ito. Ito ay dahil ang mga klase na iyon ay inilapat mula min-width: 0at pataas, at sa gayon ay hindi nakatali sa isang query sa media. Ang natitirang mga breakpoint, gayunpaman, ay may kasamang breakpoint abbreviation.

Ang mga klase ay pinangalanan gamit ang format {property}{sides}-{size}para sa xsat {property}{sides}-{breakpoint}-{size}para sa sm, md, lg, at xl.

Kung saan ang ari- arian ay isa sa:

m- para sa mga klase na itinakdamargin
p- para sa mga klase na itinakdapadding

Kung saan ang mga gilid ay isa sa:

t- para sa mga klase na nagtatakda margin-topopadding-top
b- para sa mga klase na nagtatakda margin-bottomopadding-bottom
l- para sa mga klase na nagtatakda margin-leftopadding-left
r- para sa mga klase na nagtatakda margin-rightopadding-right
x- para sa mga klase na nagtatakda ng pareho *-leftat*-right
y- para sa mga klase na nagtatakda ng pareho *-topat*-bottom
blangko - para sa mga klase na nagtatakda ng margino paddingsa lahat ng 4 na panig ng elemento

Kung saan ang laki ay isa sa:

0- para sa mga klase na nag-aalis ng margino paddingsa pamamagitan ng pagtatakda nito sa0
1- (bilang default) para sa mga klase na nagtatakda ng margino paddingsa$spacer * .25
2- (bilang default) para sa mga klase na nagtatakda ng margino paddingsa$spacer * .5
3- (bilang default) para sa mga klase na nagtatakda ng margino paddingsa$spacer
4- (bilang default) para sa mga klase na nagtatakda ng margino paddingsa$spacer * 1.5
5- (bilang default) para sa mga klase na nagtatakda ng margino paddingsa$spacer * 3
auto- para sa mga klase na itinakda ang marginsa auto

(Maaari kang magdagdag ng higit pang laki sa pamamagitan ng pagdaragdag ng mga entry sa $spacersvariable ng Sass map.)

Mga halimbawa

Narito ang ilang kinatawan ng mga halimbawa ng mga klase na ito:

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

Pahalang na pagsentro

Bilang karagdagan, ang Bootstrap ay nagsasama rin ng isang .mx-autoklase para sa pahalang na pagsentro ng nakapirming lapad na antas ng block na nilalaman—iyon ay, nilalamang mayroon display: blockat isang widthset—sa pamamagitan ng pagtatakda ng mga pahalang na margin sa auto.

Nakasentro na elemento

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

Negatibong margin

Sa CSS, marginang mga katangian ay maaaring gumamit ng mga negatibong halaga ( paddinghindi maaaring). Mula noong 4.2, nagdagdag kami ng mga negatibong margin utility para sa bawat non-zero integer na laki na nakalista sa itaas (hal, 1, 2, 3, 4, 5). Ang mga utility na ito ay mainam para sa pag-customize ng grid column gutters sa mga breakpoint.

Ang syntax ay halos kapareho ng default, positibong margin utility, ngunit may pagdaragdag ng nbago ang hiniling na laki. Narito ang isang halimbawang klase na kabaligtaran ng .mt-1:

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

Narito ang isang halimbawa ng pag-customize ng Bootstrap grid sa medium ( md) breakpoint at sa itaas. Dinagdagan namin ang .colpadding .px-md-5at pagkatapos ay kinontra iyon sa .mx-md-n5magulang .row.

Custom na column padding

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