Wie können die Klassen „col-lg-push' und „col-lg-pull' von Bootstrap die Spaltenreihenfolge manipulieren?

Manipulation der Spaltenreihenfolge mithilfe der Rasterreihenfolge in Bootstrap

Das Rastersystem von Bootstrap ermöglicht eine präzise Kontrolle über das Layout und die Reihenfolge von Spalten. Mit den Klassen col-lg-push und col-lg-pull können Sie Spalten an bestimmte Positionen innerhalb einer Zeile in Desktop-Ansichtsfenstern verschieben oder ziehen (>= lg).

So verwenden Sie Spalten lg-push und col-lg-pull

Um eine Spalte zu verschieben oder zu ziehen, geben Sie nach col-lg-push oder die gewünschte Zahl an col-lg-pull. Zum Beispiel würde col-lg-pull-5 eine Spalte ausgehend von ihrer Standardposition um 5 Spalten nach links ziehen.

Beispiel: Spalten für Mobilgeräte und Desktops neu anordnen

Nehmen wir das von Ihnen bereitgestellte Beispiel:

[5] [5] [2]  (Desktop)

[5] (second)
[5] (first)
[2]  (Mobile)

Um dieses Layout mithilfe der Rasterreihenfolge von Bootstrap zu erreichen, würden Sie die verwenden Folgender Code:

<div>

Erklärung:

In Desktop-Ansichtsfenstern (>= lg) bestimmt die Spaltenreihenfolge in Ihrem HTML das Layout. Daher wird Inhalt B um 5 Spalten nach rechts verschoben und nach Inhalt A platziert. In mobilen Ansichtsfenstern (< lg) gilt die Standardreihenfolge, bei der zuerst Inhalt B und dann Inhalt A gerendert werden.

Wichtige Hinweise:

• Die Klassen col-lg-push und col-lg-pull wirken sich nur auf Spalten auf großen (Desktop-) Ansichtsfenster.
• Die Reihenfolge der Spalten in Ihrem HTML sollte das gewünschte mobile Layout widerspiegeln.
• Bootstrap 4 führte das Flexbox-basierte Rastersystem ein, das die .order-*-Klassen für flexiblere Spalten einführte Bestellung.

Das obige ist der detaillierte Inhalt vonWie können die Klassen „col-lg-push' und „col-lg-pull' von Bootstrap die Spaltenreihenfolge manipulieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!