Wie kann ich die Spaltenreihenfolge in Bootstrap 3 mithilfe von „col-lg-push' und „col-lg-pull' steuern?

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

In Twitter Bootstrap 3 ist die col Mit den Klassen -lg-push und col-lg-pull können Entwickler die Reihenfolge der Spalten in einem Rasterlayout auf dem Desktop und über Ansichtsfenstern ändern. Diese Funktionalität ist besonders nützlich, wenn Sie responsive Layouts erstellen, die Spalten in einer bestimmten Reihenfolge auf bestimmten Bildschirmgrößen anzeigen müssen.

col-lg-push und col-lg-pull verstehen

• col-lg-push-x: Diese Klasse verschiebt eine Spalte effektiv um die angegebene Anzahl von Spalten nach rechts verschiebt ihre Position im Raster nach rechts.
• col-lg-pull-x: Diese Klasse zieht eine Spalte um die angegebene Anzahl von Spalten nach links und verschiebt ihre Position nach links im Raster hinterlassen.

Syntax und Verwendung

Um diese Klassen zu verwenden, fügen Sie einfach hinzu fügen Sie sie der Klasse col-lg-* hinzu, die die Breite der Spalte definiert. Wenn Sie beispielsweise eine Spalte um 5 Spalten nach rechts verschieben möchten, würden Sie die Klasse col-lg-5 col-lg-push-5 verwenden.

Beispiel

Beachten Sie das folgende Markup:

<div class="row">
  <div class="col-lg-5 col-lg-push-5">Content B</div>
  <div class="col-lg-5 col-lg-pull-5">Content A</div>
  <div class="col-lg-2">Content C</div>
</div>

In Desktop-Ansichtsfenstern (wo LG gilt) wird Inhalt B nach rechts verschoben um 5 Spalten und platziert ihn rechts von Inhalt C. Inhalt A wird um 5 Spalten nach links gezogen und effektiv links von Inhalt B platziert. Dies führt zu folgendem Layout:

[Content B] [Content A] [Content C]

Ausnahme bei mobilen Ansichtsfenstern

Es ist wichtig zu beachten, dass die Push- und Pull-Funktion nur für Ansichtsfenster gilt, die größer oder gleich der angegebenen Größe sind. Wenn Sie beispielsweise col-lg-push-5 verwenden, wird die Spalte nur in Desktop-Ansichtsfenstern verschoben (wo lg gilt). In mobilen Ansichtsfenstern werden die Spalten in ihrer Standardreihenfolge gerendert.

Fazit

Die Klassen col-lg-push und col-lg-pull bieten eine leistungsstarke Möglichkeit dazu Bearbeiten Sie die Reihenfolge der Spalten in Bootstrap 3-Layouts. Durch das Verständnis der Syntax- und Nutzungsrichtlinien können Entwickler reaktionsfähige Layouts erstellen, die sich an unterschiedliche Bildschirmgrößen anpassen und gleichzeitig eine gewünschte visuelle Hierarchie beibehalten.

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