Wie kann ich die Spaltenreihenfolge in Bootstrap 3 mit „col-lg-push' und „col-lg-pull' manipulieren?

Manipulation der Spaltenreihenfolge mit col-lg-push und col-lg-pull in Twitter Bootstrap 3

Praktisches col-lg- von Twitter Bootstrap Die Klassen push und col-lg-pull bieten die Flexibilität, die Reihenfolge der Spalten auf größeren Bildschirmen (Desktop oder) zu ändern Laptop).

Verstehen der Syntax

Die Syntax für diese Klassen ist:

• col-vp-push-x: Schiebt die Spalte x Anzahl der Spalten nach rechts, ausgehend von der normalen Position in Ansichtsfenstern, die größer oder gleich sind vp.
• col-vp-pull-x: Zieht die Spalte x Spaltenanzahl nach links, beginnend von ihrer normalen Position in Ansichtsfenstern größer oder gleich vp.

Hier kann vp xs, sm, md oder lg sein, während x von 1 bis reicht 12.

Beispielszenarien

Betrachten Sie das folgende Beispiel, in dem Sie ein Raster mit 3 Spalten anzeigen möchten: 2 mit der Länge 5 und 1 mit der Länge 2.

• Desktop-Ansicht (≥ lg): Anzeige [5] [5] [2] horizontal.
• Mobile Ansicht (≤ sm): Anzeige [5] (zweite) [5] (erste) [2] vertikal.

Code:

<div class="row">
  <div class="col-lg-5 col-lg-push-5"></div>
  <div class="col-lg-5 col-lg-pull-5"></div>
  <div class="col-lg-2"></div>
</div>

Erklärung:

• Die erste Kol-lg -5-Element wird um 5 Spalten nach rechts verschoben, sodass es 5 Spalten nach seiner normalen Position beginnt.
• Das Das zweite col-lg-5-Element wird 5 Spalten nach links gezogen, sodass es 5 Spalten vor seiner normalen Position beginnt.
• Das col-lg-2-Element bleibt in seiner Standardreihenfolge.

Hinweis: Um eine korrekte Funktionalität sicherzustellen, stellen Sie sicher, dass die Reihenfolge der Elemente im Markup mit der gewünschten Reihenfolge auf den größeren Bildschirmen übereinstimmt.

Das obige ist der detaillierte Inhalt vonWie kann ich die Spaltenreihenfolge in Bootstrap 3 mit „col-lg-push' und „col-lg-pull' manipulieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!