Verwenden von Abstandsdienstprogrammklassen in Bootstrap

In Bootstrap können Sie mit Abstandsdienstprogrammklassen den Abstand um Ihre Elemente einfach steuern. Wenn Sie jedoch auf Probleme bei der Verwendung stoßen, finden Sie hier eine Anleitung, die Ihnen weiterhilft.

Aktualisierte Abstandssyntax (Bootstrap 4 und 5)

Bootstrap 4 führte ein Vereinfachte Syntax für Abstandsdienstprogrammklassen:

Ränder:
m{Seiten}-{Größe}

Padding:
p {sides}-{size}

Zum Beispiel:
mb-2 = Rand unten 2 Abstandseinheiten
p-1 = Auffüllen aller Seiten 1 Abstandseinheit

Bootstrap 5 beinhaltet RTL-Unterstützung, was zu Änderungen der richtungsspezifischen Präfixe führt:

*pl-* = ps-* (start)
*pr-* = pe-* (end)
*ml- * = ms-* (Start)
*mr-* = me-* (Ende)

Responsive Spacing

Sie können jetzt Abstände auf bestimmte Haltepunkte anwenden unter Verwendung der folgenden Syntax:

Ränder:
m{Seiten}-{Haltepunkt}-{Größe}

Padding:
p{sides}-{breakpoint}-{size}

Zum Beispiel:
mt-md-2 = Rand der oberen 2 Abstandseinheiten auf mittelgroßen Bildschirmen und darüber

Beispiel in MeteorJS mit React

Wenn Sie MeteorJS mit React verwenden, stellen Sie sicher, dass das Bootstrap-Spacer-Paket installiert ist:

meteor npm install bootstrap-spacer

Importieren Sie dann die Dienstprogrammklassen für den Abstand in Ihre Komponente:

import { spacers } from "bootstrap-spacer";

Verwenden Sie die Dienstprogrammklassen wie in Standard-HTML:

  ...

Fehlerbehebung

• Wenn die Abstandsklassen nicht funktionieren, überprüfen Sie, ob das Bootstrap-Spacer-Paket installiert und in Ihre Komponente importiert ist.
• Stellen Sie sicher, dass die von Ihnen verwendeten Klassennamen mit der aktualisierten Syntax übereinstimmen.
• Weitere Informationen und Beispiele finden Sie in der entsprechenden Dokumentation.