Abstand

Bootstrap enthält eng breet Palette vu Shorthand reaktiounsfäeger Spillraum, Padding, a Spalt Utility Klassen fir d'Erscheinung vun engem Element z'änneren.

Op dëser Säit

Margin a Polsterung

Gitt reaktiounsfäeg marginoder paddingWäerter un en Element oder e Subset vu senge Säiten mat Shorthand Klassen. Ëmfaasst Ënnerstëtzung fir eenzel Eegeschafte, all Eegeschafte, a vertikal an horizontal Eegeschafte. Klassen sinn aus enger Standard Sass Kaart gebaut rangéiert vun .25rembis 3rem.

Benotzt de CSS Grid Layoutmodul? Betruecht amplaz de Spalt-Utility ze benotzen.

Notatioun

Abstands-Utilities, déi op all Breakpoints gëllen, vun xsbis xxl, hu keng Breakpoint Ofkierzung dran. Dëst ass well dës Klassen vun min-width: 0an erop applizéiert ginn, an dofir net vun enger Medienufro gebonnen sinn. Déi reschtlech Breakpunkter enthalen awer eng Breakpoint Ofkierzung.

D'Klassen gi mam Format {property}{sides}-{size}fir xsa {property}{sides}-{breakpoint}-{size}fir sm, md, lg, xl, an xxl.

Wou Immobilie ee vun:

m- fir Klassen déi setzenmargin
p- fir Klassen déi setzenpadding

Wou Säiten eng vun:

t- fir Klassen déi setzen margin-topoderpadding-top
b- fir Klassen déi setzen margin-bottomoderpadding-bottom
s- (Start) fir Klassen déi setzen margin-leftoder padding-leftam LTR, margin-rightoder padding-rightan RTL
e- (Enn) fir Klassen déi setzen margin-rightoder padding-rightan LTR, margin-leftoder padding-leftan RTL
x- fir Klassen déi souwuel *-lefta setzen*-right
y- fir Klassen déi souwuel *-topa setzen*-bottom
eidel - fir Klassen déi eng marginoder paddingop all 4 Säiten vum Element setzen

Wou Gréisst ass eng vun:

0- fir Klassen déi eliminéiert marginoder paddingandeems se se setzen0
1- (par défaut) fir Klassen déi den marginoder paddingop setzen$spacer * .25
2- (par défaut) fir Klassen déi den marginoder paddingop setzen$spacer * .5
3- (par défaut) fir Klassen déi den marginoder paddingop setzen$spacer
4- (par défaut) fir Klassen déi den marginoder paddingop setzen$spacer * 1.5
5- (par défaut) fir Klassen déi den marginoder paddingop setzen$spacer * 3
auto- fir Klassen déi den marginAuto setzen

(Dir kënnt méi Gréissten addéieren andeems Dir Entréen an d' $spacersSass Kaartvariabel bäidréit.)

Beispiller

Hei sinn e puer representativ Beispiller vun dëse Klassen:

.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 zentréieren

Zousätzlech enthält Bootstrap och eng .mx-autoKlass fir den Inhalt vu fixe Breet-Blockniveau horizontal ze zentréieren - dat ass Inhalt deen display: blockan e widthSet huet - andeems d'horizontale Margen op setzen auto.

Zentréiert Element

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

Negativ Margin

An CSS kënnen marginEegeschafte negativ Wäerter benotzen ( paddingkann net). Dës negativ Margen sinn als Standard deaktivéiert , awer kënnen a Sass duerch Astellung aktivéiert ginn $enable-negative-margins: true.

D'Syntax ass bal d'selwecht wéi d'Standard, positiv Margin Utilities, awer mat der Zousatz vun nder ugefrote Gréisst. Hei ass eng Beispillklass déi de Géigendeel ass .mt-1:

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

Gap

Wann Dir benotzt display: grid, kënnt Dir gapUtilities am Elterendeel Rasterbehälter benotzen. Dëst kann spueren fir Margin Utilities un eenzel Rasterartikelen (Kanner vun engem display: gridContainer) ze addéieren. Gap Utilities si reaktiounsfäeger par défaut, a ginn iwwer eis Utilities API generéiert, baséiert op der $spacersSass Kaart.

Gitter Artikel 1

Gitter Artikel 2

Gitter Artikel 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>

Ënnerstëtzung enthält reaktiounsfäeger Optiounen fir all Bootstrap d'Gitter Breakpoints, souwéi sechs Gréisste vun der $spacersKaart ( 0- 5). Et gëtt keng .gap-autoUtility Klass well et effektiv d'selwecht ass wéi .gap-0.

Sass

Kaarten

Abstands Utilities ginn iwwer Sass Kaart deklaréiert an dann mat eiser Utilities API generéiert.

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

Utilities API

Abstand Utilities ginn an eiser Utilities API deklaréiert an scss/_utilities.scss. Léiert wéi Dir d'Utilities API benotzt.

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