Spacing

Bootstrap inosanganisira huwandu hwakasiyana hweshorthand inopindura margin, padding, uye gap utility makirasi kugadzirisa chitarisiko chechinhu.

Pa peji ino

Margin uye padding

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.

Uchishandisa iyo CSS Grid marongero module? Funga kushandisa gap utility .

Notation

Spacing utilities anoshanda kune ese mabreakpoints, kubva xskusvika kune xxl, haana breakpoint chidimbu mazviri. Izvi zvinodaro nekuti iwo makirasi anoshandiswa 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, lg, xluye xxl.

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
s- (kutanga) emakirasi anoseta margin-leftkana padding-leftmuLTR, margin-rightkana padding-rightmuRTL
e- (magumo) emakirasi anoseta margin-rightkana padding-rightmuLTR, margin-leftkana padding-leftmuRTL
x- kumakirasi anoisa zvese *-leftuye*-right
y- kumakirasi anoisa zvese *-topuye*-bottom
blank - yemakirasi anoisa a marginkana paddingpamativi ese 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;
}

.ms-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). Aya mapeji asina kunaka anovharwa nekusarudzika , asi anogona kugoneswa muSass nekuseta $enable-negative-margins: true.

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

Gap

Paunenge uchishandisa display: grid, unogona kushandisa gapzvishandiso pane yevabereki grid mudziyo. Izvi zvinogona kuchengetedza pakuwedzera mariji ekushandisa kune yega grid zvinhu (vana display: gridvemudziyo). Zvishandiso zveGap zvinoteera nekusarudzika, uye zvinogadzirwa kuburikidza neyedu zvekushandisa API, zvichibva $spacerspamepu yeSass.

Grid chinhu 1

Grid chinhu 2

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

Tsigiro inosanganisira inopindura sarudzo kune ese eBootstrap's grid breakpoints, pamwe nemasaizi matanhatu kubva $spacerspamepu ( 0- 5). Iko hakuna .gap-autoutility kirasi sezvo ichinyatso fanana ne .gap-0.

Sass

Maps

Nzvimbo dzekushandisa dzinoziviswa kuburikidza nemepu yeSass uyezve inogadzirwa neyedu zvekushandisa API.

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

Purogiramu inonzi Utilities

Spacing utilities inoziviswa mune zvedu zvekushandisa API mu scss/_utilities.scss. Dzidza mashandisiro ezvishandiso API.

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