Source

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>