Wie haben sich die Spacing-Dienstprogrammklassen von Bootstrap in Bootstrap 4 und 5 geändert?

Wie verwende ich die Spacing Utility-Klassen in Bootstrap?

In einem Artikel sind Sie auf die Bootstrap 4 Spacing Utility-Klassen wie m-b- gestoßen. lg, das Sie erfolglos in einer React MeteorJS-Anwendung zu implementieren versucht haben. Lassen Sie uns zur Verdeutlichung die Verwendung und Aktualisierungen der Abstandsdienstprogramme von Bootstrap untersuchen.

Bootstrap 5 (Beta 2021)

Seit Bootstrap 5 die RTL-Unterstützung eingeführt hat, gibt es die Konzepte links und rechts wurden durch Start und Ende ersetzt, was zu Änderungen in den Abstandsdienstprogrammen l- und r- führt:

• pl-* = ps-*
• pr-* = pe-*
• ml-* = ms-*
• mr-* = me-*

Bootstrap 4 (Update 2020)

Die Abstandsdienstprogramme von Bootstrap 4 haben sich seit der Alpha-Veröffentlichung weiterentwickelt. Die aktualisierte Syntax lautet:

• Ränder: m{sides}-{size}
• Padding: p{sides}-{ Größe🎜>

Zum Beispiel:

mb-2 = Rand unten 2 Abstandseinheiten
• m-0 = keine Ränder
• pt-3 = Polsterung oben 3 Abstandseinheiten
• p-1 = Polsterung aller Seiten 1 Abstandseinheit

Bootstrap 4 bietet 6 Größen (0-5), die einen Teil davon darstellen Standard-Abstandseinheit .5rem. Darüber hinaus können Sie jetzt Dienstprogramme für die X-Achse (links/rechts) und die Y-Achse (oben/unten) angeben:

my-2 = Rand oben und unten 2 Abstandseinheiten
• mx-0 = keine Ränder links und rechts
• px-3 = Abstand links und rechts um 3 Abstandseinheiten

Außerdem reagieren diese Abstandsdienstprogramme mit dem kleinsten Haltepunkt (xs ) impliziert, wenn kein Haltepunkt angegeben ist:

mt-md-2 = Rand oben 2 Abstandseinheiten, auf md (und höher)
• py-sm-0 = kein Auffüllen oben & unten, auf sm (und oben)

Das obige ist der detaillierte Inhalt vonWie haben sich die Spacing-Dienstprogrammklassen von Bootstrap in Bootstrap 4 und 5 geändert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!