Source

Abstand

Bootstrap enthält eine breite Palette von Dienstprogrammklassen für reaktionsschnelle Margen und Auffüllungen in Kurzschrift, um das Erscheinungsbild eines Elements zu ändern.

Wie es funktioniert

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.

Notation

Abstandshilfsprogramme, die für alle Haltepunkte gelten, von xsbis xl, 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, and benannt xl.

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
  • l- für Klassen, die setzen margin-leftoderpadding-left
  • r- für Klassen, die setzen margin-rightoderpadding-right
  • 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;
}

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

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