Wie erreicht man eine responsive Spaltenreihenfolge in Bootstrap 3 mithilfe von Push- und Pull-Klassen?

Spalten reaktionsschnell mit Bootstrap 3 verschieben/ziehen

In Bootstrap 3 können Sie die leistungsstarken Push- und Pull-Klassen nutzen, um die Reihenfolge zu manipulieren Position der Spalten auf verschiedenen Bildschirmgrößen. Ein häufiges Szenario besteht darin, das Layout von Spalten auf kleineren Bildschirmen neu anzuordnen, um die Sichtbarkeit und Benutzerfreundlichkeit zu optimieren.

Berücksichtigen Sie das folgende Layout auf größeren Bildschirmen:

<code class="html"><div class="col-lg-3">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-2">4</div>
<div class="col-lg-3">5</div></code>

Möglicherweise möchten Sie jedoch Spalten anzeigen anders auf kleineren Bildschirmen, wie zum Beispiel:

<code class="html"><div class="col-xs-6">1</div>
<div class="col-xs-6">5</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">3</div>
<div class="col-xs-4">4</div></code>

Zunächst könnten Sie versuchen, dies zu erreichen, indem Sie in der Spalte sowohl die große als auch die kleine Bildschirmgröße zuweisen Klassen, etwa so:

<code class="html"><div class="col-lg-3 col-xs-6">1</div>
<div class="col-lg-2 col-xs-4 col-xs-push-4">2</div>
<div class="col-lg-2 col-xs-4">3</div>
<div class="col-lg-2 col-xs-4">4</div>
<div class="col-lg-3 col-xs-6 col-xs-pull-12">5</div></code>

Dieser Ansatz führt jedoch oft zu einem unerwarteten Layout oder fehlenden Elementen.

Um dieses Problem zu lösen, nehmen Sie eine „Mobile-First“-Denkweise an. Anstatt mit den größeren Bildschirmgrößen zu beginnen, definieren Sie zuerst das Layout für die kleinsten Bildschirme. Verwenden Sie dann Push- und Pull-Klassen, um die Spaltenreihenfolge auf größeren Bildschirmen anzupassen.

Zum Beispiel erreicht der folgende Code das gewünschte Layout:

<code class="html"><div class="col-lg-3 col-xs-6">1</div>
<div class="col-lg-3 col-xs-6 col-lg-push-6">5</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">2</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">3</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">4</div></code>

Indem die Spalten in der gewünschten Reihenfolge angeordnet werden Zuerst auf kleineren Bildschirmen, dann können Sie sie auf größeren Bildschirmen gezielt in die richtige Position schieben und ziehen, ohne dass Elemente verloren gehen. Dieser Ansatz gewährleistet ein reaktionsschnelles und benutzerfreundliches Layout auf allen Bildschirmgrößen.

Das obige ist der detaillierte Inhalt vonWie erreicht man eine responsive Spaltenreihenfolge in Bootstrap 3 mithilfe von Push- und Pull-Klassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!