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>

Negative Marge

In CSS können marginEigenschaften negative Werte verwenden ( paddingnicht möglich). Ab 4.2 haben wir für jede oben aufgeführte ganzzahlige Größe ungleich Null (z. B. , , , , 1) 2Dienstprogramme 3für negative Margen hinzugefügt . Diese Dienstprogramme eignen sich ideal zum Anpassen von Gitterspaltenstegen über Haltepunkte hinweg.45

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

Hier ist ein Beispiel für die Anpassung des Bootstrap-Rasters am mdHaltepunkt Medium ( ) und darüber. Wir haben die .colPolsterung mit erhöht .px-md-5und dem dann mit .mx-md-n5on the parent entgegengewirkt .row.

Benutzerdefinierte Spaltenfüllung

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>