Spacing

Bootstrap inosanganisira huwandu hwakasiyana hweshorthand inopindura margin uye padding utility makirasi kugadzirisa chitarisiko chechinhu.

Zvinoshanda sei

Ipa inopindura-inoshamwaridzika marginkana paddingkukosha kune chinhu kana subset yemativi ayo ane shorthand makirasi. Inosanganisira tsigiro yezvivakwa zvega, zvese zvivakwa, uye zvakamira uye zvakachinjika zvivakwa. Makirasi anovakwa kubva kune yakasarudzika mepu yeSass kubva .25rempa 3rem.

Notation

Spacing utilities anoshanda kune ese mabreakpoints, kubva xskuenda ku xl, haana breakpoint pfupiso mazviri. Izvi zvinodaro nekuti iwo makirasi anoiswa kubva min-width: 0nekukwira, uye nekudaro haana kusungwa nemubvunzo wenhau. Iwo asara mabreakpoints, zvisinei, anosanganisira chidimbu chebreakpoint.

Makirasi anopihwa mazita pachishandiswa manyorerwo {property}{sides}-{size}ekuti xsuye {property}{sides}-{breakpoint}-{size}, sm, md, lguye xl.

Ipo pfuma iri imwe ye:

m- kumakirasi anogadzikamargin
p- kumakirasi anogadzikapadding

Iko mativi ndeimwe ye:

t- kumakirasi anoisa margin-topkanapadding-top
b- kumakirasi anoisa margin-bottomkanapadding-bottom
l- kumakirasi anoisa margin-leftkanapadding-left
r- kumakirasi anoisa margin-rightkanapadding-right
x- kumakirasi anoisa zvese *-leftuye*-right
y- kumakirasi anoisa zvese *-topuye*-bottom
blank - yemakirasi anoisa a marginkana paddingpamativi ese mana echinhu

Uko saizi imwe ye:

0- kumakirasi anobvisa iyo marginkana paddingnekuiisa kwairi0
1- (nekusarudzika) kumakirasi anoseta marginkana paddingku$spacer * .25
2- (nekusarudzika) kumakirasi anoseta marginkana paddingku$spacer * .5
3- (nekusarudzika) kumakirasi anoseta marginkana paddingku$spacer
4- (nekusarudzika) kumakirasi anoseta marginkana paddingku$spacer * 1.5
5- (nekusarudzika) kumakirasi anoseta marginkana paddingku$spacer * 3
auto- kumakirasi anoisa iyo marginotomatiki

(Unogona kuwedzera mamwe saizi nekuwedzera zvinyorwa kune iyo $spacersSass mepu inosiyana.)

Mienzaniso

Heano mimwe mienzaniso inomiririra yemakirasi aya:

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

Horizontal centering

Pamusoro pezvo, Bootstrap inosanganisirawo .mx-autokirasi yekudzikamisa-yakafara nhanho yemukati yemukati-kureva, zvirimo zvine display: blockuye widthseti-nekuisa yakachinjika miganho ku auto.

Centered element

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