Abstand

Rand und Polsterung

Weisen Sie einem Element oder einer Teilmenge seiner Seiten mit Kurzschriftklassen reaktionsfreundliche oder Werte zu margin. paddingUmfasst Unterstützung für einzelne Eigenschaften, alle Eigenschaften sowie vertikale und horizontale Eigenschaften. Klassen werden aus einer Standard-Sass-Karte erstellt, die von .25rembis reicht 3rem.

Verwenden Sie das CSS-Grid-Layoutmodul? Erwägen Sie die Verwendung des Lückendienstprogramms .

Notation

Abstandshilfsprogramme, die für alle Haltepunkte gelten, von xsbis xxl, enthalten keine Haltepunktabkürzung. Dies liegt daran, dass diese Klassen von min-width: 0und nach oben angewendet werden und daher nicht an eine Medienabfrage gebunden sind. Die verbleibenden Breakpoints enthalten jedoch eine Breakpoint-Abkürzung.

Die Klassen werden im Format {property}{sides}-{size}for xsand {property}{sides}-{breakpoint}-{size}for sm, md, lg, xl, and benannt xxl.

Wo Eigentum ist eines von:

• m- für Klassen, die gesetzt werdenmargin
• p- für Klassen, die gesetzt werdenpadding

Wobei Seiten eine ist von:

• t- für Klassen, die setzen margin-topoderpadding-top
• b- für Klassen, die setzen margin-bottomoderpadding-bottom
• s- (Start) für Klassen, die margin-leftoder padding-leftin LTR margin-rightoder padding-rightin RTL setzen
• e- (Ende) für Klassen, die margin-rightoder padding-rightin LTR margin-leftoder padding-leftin RTL setzen
• x- für Klassen, die sowohl *-leftals auch setzen*-right
• y- für Klassen, die sowohl *-topals auch setzen*-bottom
• leer - für Klassen, die ein marginoder paddingauf allen 4 Seiten des Elements setzen

Wobei die Größe eine von ist:

• 0margin- für Klassen, die das oder eliminieren, paddingindem sie es auf setzen0
• 1- (standardmäßig) für Klassen, die marginoder paddingauf setzen$spacer * .25
• 2- (standardmäßig) für Klassen, die marginoder paddingauf setzen$spacer * .5
• 3- (standardmäßig) für Klassen, die marginoder paddingauf setzen$spacer
• 4- (standardmäßig) für Klassen, die marginoder paddingauf setzen$spacer * 1.5
• 5- (standardmäßig) für Klassen, die marginoder paddingauf setzen$spacer * 3
• auto- für Klassen, die marginauf auto setzen

(Sie können weitere Größen hinzufügen, indem Sie Einträge zur $spacersKartenvariablen Sass hinzufügen.)

Beispiele

Hier sind einige repräsentative Beispiele dieser 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;
}

Horizontale Zentrierung

Darüber hinaus enthält Bootstrap auch eine .mx-autoKlasse zum horizontalen Zentrieren von Inhalten auf Blockebene mit fester Breite – d. h. Inhalten mit display: blockund einem widthSatz – durch Festlegen der horizontalen Ränder auf auto.

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

Negative Marge

In CSS können marginEigenschaften negative Werte verwenden ( paddingnicht möglich). Diese negativen Ränder sind standardmäßig deaktiviert , können aber in Sass per Einstellung aktiviert werden $enable-negative-margins: true.

Die Syntax ist fast die gleiche wie bei den standardmäßigen Hilfsprogrammen für positive Margen, jedoch mit dem Zusatz von nvor der angeforderten Größe. Hier ist eine Beispielklasse, die das Gegenteil von ist .mt-1:

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

Lücke

Wenn Sie verwenden display: grid, können Sie gapDienstprogramme im übergeordneten Grid-Container verwenden. Dies kann das Hinzufügen von Margin-Utilities zu einzelnen Grid-Elementen (Kindelementen eines display: gridContainers) ersparen. Gap-Dienstprogramme reagieren standardmäßig und werden über unsere Dienstprogramme-API basierend auf der $spacersSass-Karte generiert.

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

Die Unterstützung umfasst reaktionsschnelle Optionen für alle Grid-Breakpoints von Bootstrap sowie sechs Größen aus der $spacersKarte ( 0– 5). Es gibt keine .gap-autoUtility-Klasse, da es praktisch dasselbe ist wie .gap-0.

Sass

Karten

Spacing Utilitys werden über die Sass-Karte deklariert und dann mit unserer Utility-API generiert.

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

Dienstprogramme-API

Spacing-Utilities werden in unserer Utilities-API in deklariert scss/_utilities.scss. Erfahren Sie, wie Sie die Utilities-API verwenden.

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