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
. padding
Umfasst Unterstützung für einzelne Eigenschaften, alle Eigenschaften sowie vertikale und horizontale Eigenschaften. Klassen werden aus einer Standard-Sass-Karte erstellt, die von .25rem
bis reicht 3rem
.
Notation
Abstandshilfsprogramme, die für alle Haltepunkte gelten, von xs
bis xl
, enthalten keine Haltepunktabkürzung. Dies liegt daran, dass diese Klassen von min-width: 0
und 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 xs
and {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 setzenmargin-top
oderpadding-top
b
- für Klassen, die setzenmargin-bottom
oderpadding-bottom
l
- für Klassen, die setzenmargin-left
oderpadding-left
r
- für Klassen, die setzenmargin-right
oderpadding-right
x
- für Klassen, die sowohl*-left
als auch setzen*-right
y
- für Klassen, die sowohl*-top
als auch setzen*-bottom
- leer - für Klassen, die ein
margin
oderpadding
auf allen 4 Seiten des Elements setzen
Wobei die Größe eine von ist:
0
margin
- für Klassen, die das oder eliminieren,padding
indem sie es auf setzen0
1
- (standardmäßig) für Klassen, diemargin
oderpadding
auf setzen$spacer * .25
2
- (standardmäßig) für Klassen, diemargin
oderpadding
auf setzen$spacer * .5
3
- (standardmäßig) für Klassen, diemargin
oderpadding
auf setzen$spacer
4
- (standardmäßig) für Klassen, diemargin
oderpadding
auf setzen$spacer * 1.5
5
- (standardmäßig) für Klassen, diemargin
oderpadding
auf setzen$spacer * 3
auto
- für Klassen, diemargin
auf auto setzen
(Sie können weitere Größen hinzufügen, indem Sie Einträge zur $spacers
Kartenvariablen 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-auto
Klasse zum horizontalen Zentrieren von Inhalten auf Blockebene mit fester Breite – d. h. Inhalten mit display: block
und einem width
Satz – durch Festlegen der horizontalen Ränder auf auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
Negative Marge
In CSS können margin
Eigenschaften negative Werte verwenden ( padding
nicht möglich). Ab 4.2 haben wir für jede oben aufgeführte ganzzahlige Größe ungleich Null (z. B. , , , , 1
) 2
Dienstprogramme 3
für negative Margen hinzugefügt . Diese Dienstprogramme eignen sich ideal zum Anpassen von Gitterspaltenstegen über Haltepunkte hinweg.4
5
Die Syntax ist fast die gleiche wie bei den standardmäßigen Hilfsprogrammen für positive Margen, jedoch mit dem Zusatz von n
vor 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 md
Haltepunkt Medium ( ) und darüber. Wir haben die .col
Polsterung mit erhöht .px-md-5
und dem dann mit .mx-md-n5
on the parent entgegengewirkt .row
.
<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>