Spacing

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

Li ser vê rûpelê

Margin û padding

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.

Modula sêwirana CSS Grid bikar tînin? Bi karanîna kargêriya gap bifikirin .

Notation

Karûbarên valahiyê yên ku ji bo hemî xalên veqetandinê, ji xsber xxl, 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, û xxl.

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
s- (destpêk) ji bo dersên ku li LTR, an margin-leftdi RTL de têne danînpadding-leftmargin-rightpadding-right
e- (dawî) ji bo dersên ku di LTR, an margin-rightdi RTL de têne danînpadding-rightmargin-leftpadding-left
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;
}

.ms-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). Van marjînalên neyînî ji hêla xwerû ve neçalak in , lê dikarin di Sass de bi mîhengan werin çalak kirin $enable-negative-margins: true.

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

Qelîştok

Dema ku hûn bikar tînin display: grid, hûn dikarin gapkarûbarên li ser konteynera torê ya dêûbav bikar bînin. Ev dikare li ser lêzêdekirina karûbarên marjînal li hêmanên torê yên takekesî (zarokên display: gridkonteynerek) xilas bike. Karûbarên Gap ji hêla xwerû ve bersivdar in, û li ser bingeha $spacersnexşeya Sass-ê bi navgîniya API-ya karûbarên me ve têne çêkirin.

Xala torê 1

Xala torê 2

Xala torê 3

<div class="d-grid gap-3">
  <div class="p-2 bg-light border">Grid item 1</div>
  <div class="p-2 bg-light border">Grid item 2</div>
  <div class="p-2 bg-light border">Grid item 3</div>
</div>

Piştgirî ji bo hemî xalên şikestî yên Bootstrap, û her weha şeş pîvanên ji $spacersnexşeyê vebijarkên bersivdar vedihewîne ( 0– 5). .gap-autoDersek karûbar tune ji ber ku ew bi bandor heman e .gap-0.

Sass

Nexşe

Karûbarên valahiyê bi nexşeya Sass ve têne ragihandin û dûv re bi karûbarên API-ya me re têne çêkirin.

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);

Utilities API

Karûbarên valahiyê di API-ya karûbarên me de têne ragihandin scss/_utilities.scss. Fêr bibin ka meriv çawa karûbarên API-ê bikar tîne.

    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: map-merge($spacers, (auto: auto))
    ),
    // Negative margin utilities
    "negative-margin": (
      responsive: true,
      property: margin,
      class: m,
      values: $negative-spacers
    ),
    "negative-margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: $negative-spacers
    ),
    "negative-margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: $negative-spacers
    ),
    "negative-margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: $negative-spacers
    ),
    "negative-margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: $negative-spacers
    ),
    "negative-margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: $negative-spacers
    ),
    "negative-margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: $negative-spacers
    ),
    // Padding utilities
    "padding": (
      responsive: true,
      property: padding,
      class: p,
      values: $spacers
    ),
    "padding-x": (
      responsive: true,
      property: padding-right padding-left,
      class: px,
      values: $spacers
    ),
    "padding-y": (
      responsive: true,
      property: padding-top padding-bottom,
      class: py,
      values: $spacers
    ),
    "padding-top": (
      responsive: true,
      property: padding-top,
      class: pt,
      values: $spacers
    ),
    "padding-end": (
      responsive: true,
      property: padding-right,
      class: pe,
      values: $spacers
    ),
    "padding-bottom": (
      responsive: true,
      property: padding-bottom,
      class: pb,
      values: $spacers
    ),
    "padding-start": (
      responsive: true,
      property: padding-left,
      class: ps,
      values: $spacers
    ),