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 xskusvika kune xl, haana breakpoint chidimbu 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 marginkana paddingpamativi 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>

Negative margin

MuCSS, marginzvivakwa zvinogona kushandisa maitiro asina kunaka ( paddinghaagone). Kubva pa4.2, tawedzera magineti ekushandisa kune ese asiri-zero saizi yakanyorwa pamusoro (semuenzaniso, 1, 2, 3, 4, 5). Izvi zvinoshandiswa zvakanakira kugadzirisa grid column gutters pamabreakpoints.

Iyo syntax yakada kufanana neyekutanga, yakanaka margin zvishandiso, asi nekuwedzera nkwesati yakumbirwa saizi. Heino muenzaniso kirasi inopesana ne .mt-1:

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

Heino muenzaniso wekugadzirisa iyo Bootstrap grid panguva yepakati ( md) breakpoint uye pamusoro. Takawedzera .colpadding nayo tichibva tapesana .px-md-5nazvo .mx-md-n5pamubereki .row.

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