Wie ordne ich Bootstrap 3-Spalten mit „col-lg-push' und „col-lg-pull' neu an?

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

Die Spaltenreihenfolge in Bootstrap 3 ermöglicht Entwicklern um die Position von Spalten innerhalb von Zeilen für verschiedene Bildschirmgrößen anzupassen. Die Klassen col-lg-push und col-lg-pull wurden speziell für diesen Zweck entwickelt und bieten Kontrolle über das Layout von Spalten auf Geräten mit großem Bildschirm (Desktops und Laptops).

Um die Spaltenreihenfolge anzupassen, können Sie Sie müssen:

1. die Reihenfolge in HTML definieren:die Reihenfolge der Spalten in Ihrem HTML-Markup ändern. Wenn Sie beispielsweise möchten, dass die zweite 5-Raster-Spalte zuerst angezeigt wird, platzieren Sie ihren Inhalt vor der ersten 5-Raster-Spalte in Ihrem Code.
2. Verwenden Sie die Push-Klasse: Fügen Sie die Spalte hinzu. lg-push-5-Klasse in die Spalte, die Sie nach rechts verschieben möchten. Diese Klasse verschiebt die Spalte um 5 Spalten von ihrer ursprünglichen Position.
3. Pull-Klasse verwenden: Fügen Sie die Klasse col-lg-pull-5 zu der Spalte hinzu, die Sie nach links verschieben möchten . Diese Klasse zieht die Spalte um 5 Spalten nach links.

Beispiel:

<div class='row'>
  <div class='col-lg-5 col-lg-push-5'>Second</div>
  <div class='col-lg-5 col-lg-pull-5'>First</div>
  <div class='col-lg-2'>Third</div>
</div>

Erklärung:

In diesem Beispiel wird die zweite Spalte mit col-lg-push-5 um 5 Spalten nach rechts verschoben, sodass sie nach dem erscheint Dritte Spalte auf Großbildschirmen. Die erste Spalte wird mit col-lg-pull-5 um 5 Spalten nach links gezogen, sodass sie vor die dritte Spalte gelangt. Dadurch wird das gewünschte Layout erstellt: [5] (zweite), [5] (erste), [2] auf dem Mobilgerät und [5] [5] [2] auf dem Desktop.

Pull und verstehen Drücken:

• Ziehen: Verschiebt eine Spalte in die links.
• Drücken:Schiebt eine Spalte nach rechts.

Hinweis:

• Die Push- und Pull-Klassen beeinflussen nur die Reihenfolge der Spalten auf bestimmten Bildschirmgrößen (in diesem Fall große Bildschirme).
• Die Klassen haben keine Auswirkung auf kleinere Bildschirmgrößen, da Bootstrap standardmäßig das mobile Layout priorisiert.

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