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? Bifikirin ku di şûna wê de karûbarê gap bikar bînin.

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

html

<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,
);

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
    ),
    // Gap utility
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),