Wie haben sich die Spaltenoffsetklassen in Bootstrap 4 Beta geändert?

Spaltenversatz in Bootstrap 4.0.0-Beta

In Bootstrap 4 Beta wurden die Offset-Klassen aktualisiert, was zu Verwirrung bei Benutzern führt, die es gewohnt sind, „Offset“ zu verwenden. md-*“, um Spalten zu verschieben.

Offset-Klassenänderungen

In Bootstrap 4 Beta wurden die „offset-md-“-Klassen durch „offset-{breakpoint}-“ ersetzt. ." Um beispielsweise eine Spalte um zwei Spalten an einem mittleren Haltepunkt zu versetzen, würden Sie jetzt „offset-md-2“ anstelle von „col-md-offset-2“ verwenden.

ml-auto für die Spaltenausrichtung

Die Klasse „ml-auto“ bietet eine neue Möglichkeit, Spalten auszurichten, indem sie so weit wie möglich nach rechts verschoben werden. Allerdings ist dieser Ansatz zur automatischen Marginierung möglicherweise nicht für alle Szenarien geeignet.

Benutzerdefinierter Offsetting-Workaround

Wenn Sie bestimmte Spaltenoffsets benötigen, z. B. den Offset um zwei Spalten, besteht eine Workaround darin, a zu verwenden Fügen Sie eine Dummy- oder Platzhalterspalte hinzu, um den gewünschten Effekt zu erzielen. Zum Beispiel:

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

mx-auto zum Zentrieren von Spalten

Um eine Spalte zu zentrieren, verwenden Sie die Klasse „mx-auto“, die auf beiden Seiten der Spalte gleiche Ränder erstellt.

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

Hinweis: Spezifische Spaltenoffsets in Beta 2

Es ist wichtig zu beachten, dass bestimmte Spaltenoffsets, wie z. B. „offset-md-2“, in Bootstrap 4 Beta 2 wiederhergestellt werden. Die Klassen „ml-auto“ und „mx-auto“ können jedoch weiterhin für eine flexible Spaltenausrichtung und -zentrierung verwendet werden.

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