Heim > Web-Frontend > CSS-Tutorial > Wie ordne ich Bootstrap 3-Spalten für das Mobile-First-Layout neu an?

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

Linda Hamilton
Freigeben: 2024-12-13 05:58:09
Original
545 Leute haben es durchsucht

How to Reorder Bootstrap 3 Columns for Mobile-First Layout?

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>
Nach dem Login kopieren
  1. Standardmäßig zeigen diese Klassen auch auf Mobilgeräten zuerst den Hauptinhalt an.
  2. 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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage