Wie ordne ich Bootstrap 3-Spalten für das Mobile-First-Layout neu an?

Bootstrap 3-Spalten im mobilen Layout neu anordnen

Problem:

Ein responsives Layout verfügt über eine feste obere Navigationsleiste und zwei Spalten darunter: eine Seitenleiste und der Hauptinhalt. Während das Layout auf dem Desktop wie erwartet funktioniert, stapelt sich die Seitenleiste auf Mobilgeräten über dem Hauptinhalt und platziert ihn an der unerwünschten Position. Die gewünschte Reihenfolge auf Mobilgeräten besteht darin, zuerst den Hauptinhalt anzuzeigen, gefolgt von der Seitenleiste.

Antwort:

Eine direkte Änderung der Spaltenreihenfolge auf Mobilgeräten ist in Bootstrap nicht möglich 3. Eine Problemumgehung besteht jedoch darin, die reaktionsfähige Spaltenneuordnungsfunktion von Bootstrap für große Spalten zu nutzen Bildschirme.

Schritte:

1. Spaltenreihenfolge im HTML neu anordnen und den Hauptinhalt zuerst platzieren:

<div class="col-lg-9 col-lg-push-3">...</div>
<div class="col-lg-3 col-lg-pull-9">...</div>

2. Standardmäßig zeigen diese Klassen auch auf Mobilgeräten zuerst den Hauptinhalt an.
3. Die Klasse col-lg-push-3 schiebt den Hauptinhalt um drei Spalten nach rechts, während col-lg-pull-9 die Seitenleiste um neun Spalten nach links zieht, was auf großen Bildschirmen zur gewünschten Reihenfolge führt.

Erklärung:

In Bootstrap können Spalten mithilfe von Col-Push und Col-Pull für bestimmte Bildschirmgrößen neu positioniert werden. Durch die Verwendung von col-lg-push und col-lg-pull für große Bildschirme nehmen die Spalten auf diesen Bildschirmen die angegebene Reihenfolge an, während auf kleineren Geräten die ursprüngliche Reihenfolge beibehalten wird.

Das obige ist der detaillierte Inhalt vonWie ordne ich Bootstrap 3-Spalten für das Mobile-First-Layout neu an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!