Mellemrum

Bootstrap inkluderer en bred vifte af stenografi-responsive margin-, polstrings- og gap-hjælpeklasser for at ændre et elements udseende.

På denne side

Margin og polstring

Tildel responsvenlige værdier til et element margineller paddingen delmængde af dets sider med stenografiklasser. Inkluderer understøttelse af individuelle egenskaber, alle egenskaber og lodrette og vandrette egenskaber. Klasser er bygget ud fra et standard Sass-kort, der spænder fra .25remtil 3rem.

Bruger du CSS Grid layout-modulet? Overvej at bruge gap-værktøjet .

Notation

Afstandsværktøjer, der gælder for alle brudpunkter, fra xstil xxl, har ingen brudpunktforkortelse i sig. Dette skyldes, at disse klasser anvendes fra min-width: 0og op, og derfor ikke er bundet af en medieforespørgsel. De resterende brudpunkter inkluderer dog en brudpunktforkortelse.

Klasserne navngives ved hjælp af formatet {property}{sides}-{size}for xsog {property}{sides}-{breakpoint}-{size}for sm, md, lg, xl, og xxl.

Hvor ejendom er en af:

m- for klasser, der sættermargin
p- for klasser, der sætterpadding

Hvor sider er en af:

t- for klasser, der sætter margin-topellerpadding-top
b- for klasser, der sætter margin-bottomellerpadding-bottom
s- (start) for klasser, der indstiller margin-lefteller padding-lefti LTR, margin-righteller padding-righti RTL
e- (slut) for klasser, der sætter margin-righteller padding-righti LTR, margin-lefteller padding-lefti RTL
x- for klasser, der sætter både *-leftog*-right
y- for klasser, der sætter både *-topog*-bottom
blank - for klasser, der sætter en margineller paddingpå alle 4 sider af elementet

Hvor størrelsen er en af:

0- for klasser, der eliminerer margineller paddingved at indstille det til0
1- (som standard) for klasser, der indstiller margineller paddingtil$spacer * .25
2- (som standard) for klasser, der indstiller margineller paddingtil$spacer * .5
3- (som standard) for klasser, der indstiller margineller paddingtil$spacer
4- (som standard) for klasser, der indstiller margineller paddingtil$spacer * 1.5
5- (som standard) for klasser, der indstiller margineller paddingtil$spacer * 3
auto- for klasser, der indstiller margintil auto

(Du kan tilføje flere størrelser ved at tilføje poster til $spacersSass-kortvariablen.)

Eksempler

Her er nogle repræsentative eksempler på disse klasser:

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

Vandret centrering

Derudover inkluderer Bootstrap også en .mx-autoklasse til vandret centrering af blokniveauindhold med fast bredde - det vil sige indhold, der har display: blockog et widthsæt - ved at indstille de vandrette margener til auto.

Centreret element

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

Negativ margin

I CSS kan marginegenskaber bruge negative værdier ( paddingkan ikke). Disse negative margener er deaktiveret som standard , men kan aktiveres i Sass ved at indstille $enable-negative-margins: true.

Syntaksen er næsten den samme som standardværktøjerne med positiv margin, men med tilføjelse af nfør den ønskede størrelse. Her er et eksempel på en klasse, der er det modsatte af .mt-1:

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

Kløft

Når du bruger display: grid, kan du gøre brug af gaphjælpeprogrammer på den overordnede gitterbeholder. Dette kan spare på at skulle tilføje marginværktøjer til individuelle grid-elementer (børn af en display: gridcontainer). Gap-værktøjer er som standard responsive og genereres via vores hjælpeprogrammer API, baseret på $spacersSass-kortet.

Netelement 1

Grid punkt 2

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

Support inkluderer responsive muligheder for alle Bootstraps grid breakpoints samt seks størrelser fra $spacerskortet ( 0– 5). Der er ingen .gap-autobrugsklasse, da den faktisk er den samme som .gap-0.

Sass

Kort

Afstandsværktøjer erklæres via Sass-kort og genereres derefter med vores hjælpeprogrammer 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);

Hjælpeprogrammer API

Afstandsværktøjer er deklareret i vores hjælpeprogrammer API i scss/_utilities.scss. Lær, hvordan du bruger 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
    ),