Spacing

Bootstrap ji bo guheztina xuyangê hêmanek cûrbecûr dersên marjînal ên bersivdar û padding vedihewîne.

Çawa dixebite

Bi dersên kurtenivîsê re li hêmanek an binekomek aliyên wê yên bersivdar an nirxan bidin margin. paddingPiştgiriya taybetmendiyên kesane, hemî taybetmendiyên, û taybetmendiyên vertîkal û horizontî vedihewîne. Ders ji nexşeyek xwerû ya Sass-ê têne çêkirin ku ji .25remheya 3rem.

Notation

Karûbarên valahiyê yên ku ji bo hemî xalên veqetandinê, ji xsber xl, di wan de kurtenivîsa xala veqetînê tune. Ev ji ber ku ew ders ji min-width: 0û jor têne sepandin, û bi vî rengî bi pirsek medyayê ve girêdayî ne. Lêbelê, xalên veqetandinê yên mayî, kurtenivîsek xala veqetînê vedihewînin.

Navê çînên bi forma {property}{sides}-{size}ji bo xsû {property}{sides}-{breakpoint}-{size}ji bo sm, md, lg, û xl.

Ku milk yek ji wan e:

m- ji bo dersên ku setmargin
p- ji bo dersên ku setpadding

Ku alî yek ji wan e:

t- ji bo dersên ku set margin-topanpadding-top
b- ji bo dersên ku set margin-bottomanpadding-bottom
l- ji bo dersên ku set margin-leftanpadding-left
r- ji bo dersên ku set margin-rightanpadding-right
x- ji bo dersên ku hem *-leftû*-right
y- ji bo dersên ku hem *-topû*-bottom
vala - ji bo çînên ku marginan paddingli ser her 4 aliyên hêmanê danîne

Ku mezinahî yek ji wan e:

0- ji bo dersên ku marginan paddingbi danîna wê ji holê radikin0
1- (ji hêla xwerû) ji bo dersên ku marginan jî paddingdestnîşan dikin$spacer * .25
2- (ji hêla xwerû) ji bo dersên ku marginan jî paddingdestnîşan dikin$spacer * .5
3- (ji hêla xwerû) ji bo dersên ku marginan jî paddingdestnîşan dikin$spacer
4- (ji hêla xwerû) ji bo dersên ku marginan jî paddingdestnîşan dikin$spacer * 1.5
5- (ji hêla xwerû) ji bo dersên ku marginan jî paddingdestnîşan dikin$spacer * 3
auto- ji bo dersên ku otoyê destnîşan margindikin

(Hûn dikarin bi zêdekirina navnîşan li $spacersguhêrbara nexşeya Sass mezinahiyên din zêde bikin.)

Examples

Li vir çend mînakên nûnerê van çînan hene:

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

Navenda Horizontal

Digel vê yekê, Bootstrap di heman demê de .mx-autoçînek ji bo navendkirina asta blokê ya bi firehiya sabît-ango naveroka ku heye display: blockû set- bi widthdanîna marjînalên horizontî vedihewîne auto.

Hêmana navendî

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

Marjîna neyînî

Di CSS de, margintaybetmendî dikarin nirxên neyînî bikar bînin ( paddingnekarin). Ji 4.2-ê ve, me ji bo her mezinahiyek ne-sifir a ku li jor hatî navnîş kirin karûbarên marjînal ên neyînî zêde kiriye (mînak, 1, 2, 3, 4, 5). Van karûbaran ji bo xwerûkirina kelûpelên stûna torê li seranserê xalên veqetandinê îdeal in.

Hevoksazî hema hema heman karûbarên xwerû, marjînal ên erênî ye, lê bi lêzêdekirina nberî mezinahiya daxwazkirî. Li vir çînek mînakek heye ku berevajiyê wê ye .mt-1:

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

Li vir mînakek kesanekirina tora Bootstrap li ser xala veqetandinê ya navîn ( md) û jorîn heye. Me peldank bi dêûbav re zêde kir .colû .px-md-5dûv re .mx-md-n5li hember dêûbav .rowkir.

Padding stûna Custom

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