Wie erreicht man in Bootstrap 3 ein reaktionsfähiges Push/Pull-Spaltenverhalten?

Spalten in Bootstrap 3 verschieben und ziehen

Beim Entwerfen responsiver Layouts ist es häufig erforderlich, Spalten auf kleineren Bildschirmgrößen neu anzuordnen oder zu ändern. Während Bootstrap 3 Klassen wie col-xs-6 zum Anpassen der Spaltenbreite bereitstellt, bietet es keine direkte Unterstützung für das Schieben oder Ziehen von Spalten an bestimmten Haltepunkten.

Responsive Push/Pull erreichen

Um das gewünschte Push/Pull-Verhalten auf kleineren Bildschirmen zu erreichen, kann man einen kontraintuitiven Ansatz verfolgen: „Mobile First“. Definieren Sie zunächst das gewünschte Layout für kleinere Bildschirme mit Ihren bevorzugten col-xs-*-Klassen und wenden Sie dann col-lg-*-Klassen mit col-lg-push-* oder col-lg-pull-* an, um Spalten auf größeren Bildschirmen zu positionieren.

Zum Beispiel, um das in der Frage angegebene Layout nachzuahmen:

<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>

Auf diese Weise werden die Spalten in der für kleinere Bildschirme angegebenen Reihenfolge angezeigt, während ihre Positionierung auf größeren Desktops über Spalte angepasst wird -lg-* Klassen. Im Wesentlichen geht es bei diesem Ansatz um die Umkehrung des üblichen Prozesses, bei dem man mit dem Desktop-Layout beginnt und es an das Mobilgerät anpasst.

Das obige ist der detaillierte Inhalt vonWie erreicht man in Bootstrap 3 ein reaktionsfähiges Push/Pull-Spaltenverhalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!