Heim > Web-Frontend > CSS-Tutorial > Wie haben sich die Spaltenoffsetklassen in Bootstrap 4 Beta geändert?

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

Linda Hamilton
Freigeben: 2024-11-07 05:46:03
Original
320 Leute haben es durchsucht

How have column offset classes changed in Bootstrap 4 Beta?

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage