Avstand

Bootstrap inkluderer et bredt spekter av responsive margin-, polstrings- og gap-verktøyklasser for å modifisere et elements utseende.

På denne siden

Margin og polstring

Tilordne responsvennlige margineller paddingverdier til et element eller en undergruppe av dets sider med stenografiklasser. Inkluderer støtte for individuelle egenskaper, alle egenskaper og vertikale og horisontale egenskaper. Klassene bygges fra et standard Sass-kart som strekker seg fra .25remtil 3rem.

Bruker du CSS Grid layout-modulen? Vurder å bruke gap-verktøyet .

Notasjon

Avstandsverktøy som gjelder for alle bruddpunkter, fra xstil xxl, har ingen bruddpunktforkortelse i seg. Dette er fordi disse klassene brukes fra min-width: 0og oppover, og dermed ikke er bundet av en mediespørring. De resterende bruddpunktene inkluderer imidlertid en bruddpunktforkortelse.

Klassene er navngitt med formatet {property}{sides}-{size}for xsog {property}{sides}-{breakpoint}-{size}for sm, md, lg, xl, og xxl.

Hvor eiendom er en av:

m- for klasser som settermargin
p- for klasser som setterpadding

Hvor sider er en av:

t- for klasser som setter margin-topellerpadding-top
b- for klasser som setter margin-bottomellerpadding-bottom
s- (start) for klasser som setter margin-lefteller padding-lefti LTR, margin-righteller padding-righti RTL
e- (slutt) for klasser som setter margin-righteller padding-righti LTR, margin-lefteller padding-lefti RTL
x- for klasser som setter både *-leftog*-right
y- for klasser som setter både *-topog*-bottom
blank - for klasser som setter a margineller paddingpå alle 4 sider av elementet

Hvor størrelsen er en av:

0- for klasser som eliminerer margineller paddingved å sette den til0
1- (som standard) for klasser som setter margineller paddingtil$spacer * .25
2- (som standard) for klasser som setter margineller paddingtil$spacer * .5
3- (som standard) for klasser som setter margineller paddingtil$spacer
4- (som standard) for klasser som setter margineller paddingtil$spacer * 1.5
5- (som standard) for klasser som setter margineller paddingtil$spacer * 3
auto- for klasser som setter margintil auto

(Du kan legge til flere størrelser ved å legge til oppføringer i $spacersSass-kartvariabelen.)

Eksempler

Her er noen representative eksempler på disse klassene:

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

Horisontal sentrering

I tillegg inkluderer Bootstrap også en .mx-autoklasse for horisontalt sentrering av blokknivåinnhold med fast bredde – det vil si innhold som har display: blockog et widthsett – ved å sette de horisontale margene til auto.

Sentrert element

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

Negativ margin

I CSS kan marginegenskaper bruke negative verdier ( paddingkan ikke). Disse negative margene er deaktivert som standard , men kan aktiveres i Sass ved innstilling $enable-negative-margins: true.

Syntaksen er nesten den samme som standard, positiv marginverktøy, men med tillegg av nfør den forespurte størrelsen. Her er en eksempelklasse som er det motsatte av .mt-1:

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

Mellomrom

Når du bruker display: grid, kan du bruke gapverktøy på den overordnede rutenettbeholderen. Dette kan spare på å måtte legge til marginverktøy til individuelle rutenettelementer (barn av en display: gridcontainer). Gap-verktøy er responsive som standard, og genereres via vår utilities API, basert på $spacersSass-kartet.

Rutenettelement 1

Rutenettelement 2

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

Støtte inkluderer responsive alternativer for alle Bootstraps rutenettbrytepunkter, samt seks størrelser fra $spacerskartet ( 0– 5). Det er ingen .gap-autoverktøyklasse, da den i praksis er den samme som .gap-0.

Sass

Kart

Avstandsverktøy deklareres via Sass-kart og genereres deretter med vår utilities 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);

Utilities API

Avstandsverktøy er deklarert i vår utilities API i scss/_utilities.scss. Lær hvordan du bruker utilities 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
    ),