Wie erreicht man benutzerdefinierte Spaltenversätze in Bootstrap 4 Beta?

Bootstrap-Spaltenversatz funktioniert nicht: Eine Lösung

In Bootstrap 4 Beta ist der Spaltenversatz offenbar zu einem Grund zur Sorge für Entwickler geworden. Die zuvor verwendeten offset-md-*-Klassen wurden gemäß der Dokumentation entfernt. Dieses Problem wurde jedoch in Beta 2 vorübergehend behoben, wodurch die bekannten Offset-Klassen wiederhergestellt wurden.

In Beta 1 wurde jedoch ein neuartiger Ansatz zum Spalten-Offset mit der .ml-auto Klasse. Während diese Methode tatsächlich eine col-md-4-Spalte verschieben kann, bewirkt sie einen Versatz von vier Spalten. Dies ist nicht das, was die meisten Entwickler suchen; Sie benötigen benutzerdefinierte Offsets wie das frühere

.Die Verwendung von

als Ersatz erwies sich als unwirksam. Handelt es sich also um einen Fehler oder gibt es einen praktikablen Workaround?Glücklicherweise wurde das Problem durch die Wiederherstellung der Offset-Klassen behoben. Dennoch können die in Beta 1 eingeführten neuen automatischen Ränder weiterhin für den Spaltenversatz verwendet werden. Durch diese Ränder wird die Spalte so weit wie möglich nach rechts verschoben. Folglich hängt die Höhe der Verrechnung vom verfügbaren Platz ab. Wenn rechts von

col-md-4 keine weiteren Spalten vorhanden sind, wird die gesamte rechte Seite der Zeile eingenommen.

Alternative Lösungen

Alternativ können Sie eine Dummy-Spalte implementieren, um einen Zwei-Spalten-Offset zu erreichen:

<div class="row">
  <div class="col-md-2"></div>
  <div class="col-md-4">
    ...
  </div>
</div>

Zum Zentrieren von zwei

col-md-4-Spalten die Kombination von ml-auto und mr-auto können verwendet werden:

<div class="row">
  <div class="col-md-4 ml-auto">
    .
  </div>
  <div class="col-md-4 mr-auto">
    .
  </div>
</div>

Um schließlich eine einzelne Spalte

col-md-4 zu zentrieren, verwenden Sie einfach mx-auto für gleiche Ränder auf beiden Seiten:

<div class="row">
  <div class="col-md-4 mx-auto">
    .
  </div>
</div>

Hinweis: Die spezifischen Spaltenoffsetklassen werden in Beta 2 wieder eingeführt.

Das obige ist der detaillierte Inhalt vonWie erreicht man benutzerdefinierte Spaltenversätze in Bootstrap 4 Beta?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!