Wie handhabt Bootstrap 4 die Spaltenreihenfolge über verschiedene Bildschirmgrößen hinweg?

Spaltenreihenfolge in Bootstrap4

Für flexible Anordnungen von Spalten über verschiedene Bildschirmgrößen hinweg bietet Bootstrap eine Reihe von Optionen.

Responsive Ordering in Bootstrap 4.0:

Bootstrap 4 beseitigt das Verwendung von „xs-“-Präfixen für seine responsiven Ordnungsklassen. Stattdessen geben die Modifikatoren „Push-“ und „Pull-“ das Ansichtsfenster und die Anzahl der Einheiten an, um die die Spalte verschoben werden soll. Um beispielsweise die gewünschte 1-3-2-Reihenfolge auf Mobilgeräten zu erreichen:

<div>

Responsive Ordering in Bootstrap 4.1 und höher:

Bootstrap 4.1 führt Flexbox ein, Vereinfachung der Spaltenreihenfolge. Die Auftragsklassen reichen von „Order-1“ bis „Order-12“. Spalten können responsiv bestellt werden, z. B. „order-md-12 order-2“ (letzter auf MD, zweiter auf XS):

<div>

Alternative Bestellmethoden:

Zusätzlich zu den responsiven Bestellklassen bieten die Flexbox-Routing-Dienstprogramme eine weitere an Ansatz:

<div>

Zusätzliche Hinweise:

• Spaltenreihenfolge erfolgt relativ zur übergeordneten Zeile.
• Responsive Klassen ermöglichen eine detaillierte Steuerung Überordnung, was komplexe Anordnungen über mehrere Bildschirmgrößen hinweg ermöglicht.
• Bootstrap 4.1 und höher nicht mehr Unterstützen Sie die Push/Pull-Klassen, die in Versionen vor 4.0 verwendet werden.

Das obige ist der detaillierte Inhalt vonWie handhabt Bootstrap 4 die Spaltenreihenfolge über verschiedene Bildschirmgrößen hinweg?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!