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

161

Ich lese jetzt die Dokumentation zu Twitter Bootstrap 3 und habe versucht, die Spaltenreihenfolge wie auf dieser Seite gezeigt zu befolgen, bin aber an die Wand gestoßen. Ich verstehe nicht, warum ein solcher Code funktioniert und wie die Einstellung korrekt angegeben wird. Was ich zeigen möchte, ist ein Gitter, das aus Länge 5 besteht, und die andere Länge 5 und schließlich ein Gitter mit Länge 2.

Meins ist also ungefähr so:

[5] [5] [2]

Ich möchte Folgendes erreichen: Wenn es auf dem Desktop angezeigt wird, wird das obige Layout angezeigt. Wenn es jedoch auf Mobilgeräten angezeigt wird, möchte ich zuerst das Objekt der zweiten Länge 5, dann das erste Objekt der Länge 5 und schließlich das Objekt der Länge 2 anzeigen vertikal. So was:

[5] (second)
[5] (first)
[2]  

Während ich versuchte, dem in der obigen Dokumentation erläuterten Schritt zu folgen, erhielt ich das erste Objekt der Länge 5 über das zweite, obwohl ich mich auf mobilen Plattformen befand, auf denen, wie gesagt, das Objekt der zweiten Länge 5 oben angezeigt werden sollte. Mit anderen Worten, ich habe folgendes verstanden:

[5] (first)
[5] (second)
[2] 

Wie kann ich also den zweiten richtig über den ersten setzen? Oder könnte die Spaltenreihenfolge nicht funktionieren, da ich das gleiche Objekt verwende?

Hier ist mein Code zu Ihrer Information:

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

Außerdem wird in der Dokumentation nicht klargestellt, was pulloder was pushbedeutet. Vermisse ich also etwas?

Vielen Dank.

Blaszard
quelle
versuchen Sie class = "col-lg-5 col-sm-5 col-sm-push-5" und das gleiche für 2. mit Pull
Dawood Awan
Ein einfaches und übersichtliches Beispiel (es ist für ein 2-Spalten-Layout vorgesehen, aber Sie erhalten den Punkt sofort und können bei Bedarf weitere Spalten hinzufügen) finden Sie hier unten auf der Seite mit dem Titel "Push and Pull - Spaltenreihenfolge ändern" ": w3schools.com/bootstrap/bootstrap_grid_examples.asp
Tyler Rafferty

Antworten:

285

Diese Antwort besteht aus drei Teilen. Die offizielle Version (v3 und v4) finden Sie weiter unten.

Ich konnte nicht einmal die Klassen col-lg-push-x oder pull in den Originaldateien für RC1 finden, die ich heruntergeladen habe. Überprüfen Sie daher Ihre Datei bootstrap.css. hoffentlich ist dies etwas, das sie in RC2 klären werden.

Auf jeden Fall gab es die Klassen col-push- * und pull, und dies wird Ihren Anforderungen entsprechen. Hier ist eine Demo

<div class="row">
    <div class="col-sm-5 col-push-5">
        Content B
    </div>
    <div class="col-sm-5 col-pull-5">
        Content A
    </div>
    <div class="col-sm-2">
        Content C
    </div>
</div>

BEARBEITEN: UNTEN IST DIE ANTWORT AUF DIE OFFIZIELLE VERÖFFENTLICHUNG v3.0

Siehe auch diesen Blog-Beitrag zu diesem Thema

  • col-vp-push-x= Schieben Sie die Spalte um x Anzahl von Spalten nach rechts , beginnend an der Stelle, an der die Spalte normalerweise rendern würde -> position: relative, auf einem vp oder einem größeren Ansichtsfenster.

  • col-vp-pull-x= Ziehen Sie die Spalte um x Anzahl von Spalten nach links , beginnend an der Stelle, an der die Spalte normalerweise rendern würde -> position: relative, auf einem vp oder einem größeren Ansichtsfenster.

    vp = xs, sm, md oder lg

    x = 1 bis 12

Ich denke, was die meisten Leute durcheinander bringt, ist, dass Sie die Reihenfolge der Spalten in Ihrem HTML-Markup ändern müssen (im folgenden Beispiel steht B vor A) und dass nur das Drücken oder Ziehen von Ansichtsports ausgeführt wird größer oder gleich dem, was angegeben wurde. Das heißt, es col-sm-push-5werden nur 5 Spalten in smAnsichtsfenstern oder höher verschoben. Dies liegt daran, dass Bootstrap ein "Mobile First" -Framework ist, sodass Ihr HTML-Code die mobile Version Ihrer Website widerspiegeln sollte. Das Drücken und Ziehen erfolgt dann auf den größeren Bildschirmen.

  • (Desktop) Größere Ansichtsfenster werden verschoben und gezogen.
  • (Mobil) Kleinere Ansichtsfenster werden in normaler Reihenfolge gerendert.

DEMO

<div class="row">
    <div class="col-sm-5 col-sm-push-5">
        Content B
    </div>
    <div class="col-sm-5 col-sm-pull-5">
        Content A
    </div>
    <div class="col-sm-2">
        Content C
    </div>
</div>

Ansichtsfenster> = sm

|A|B|C|

Ansichtsfenster <sm

|B|
|A|
|C|

BEARBEITEN: UNTEN IST DIE ANTWORT FÜR v4.0

Mit v4 kommen Flexbox und andere Änderungen am Grid-System, und die Push \ Pull-Klassen wurden zugunsten der Flexbox-Reihenfolge entfernt.

  • Verwenden Sie .order-*Klassen, um die visuelle Reihenfolge zu steuern (wobei * = 1 bis 12).
  • Dies kann auch Rasterebenenspezifisch sein .order-md-*
  • Auch .order-first(-1) und .order-last(13) sind verfügbar

<div class="row">
  <div class="col order-2">1st yet 2nd</div>
  <div class="col order-1">2nd yet 1st</div>
</div>

Schmalzy
quelle
Vielen Dank. Meine importierbaren Skripte wurden in diejenigen geändert, die ich aus dem Github-Repository geklont habe. Dann funktionierte es wie erwartet. Die ersten Skripte enthielten nicht, col-lg-pushwie Sie sagten. Danke vielmals.
Blaszard
2
Danke, das Größere hat mich erwischt, als ich davon ausgegangen bin, dass es weniger als sein würde. Aber ich denke, Mobile-First-Entwickler, es macht Sinn.
Allerion
Ich denke, die zweite Option, "<= sm", sollte nur "<" sein, da sie nicht beide "=" haben können
Shawn Taylor
2
Drehen Sie die Reihenfolge der Spalten um (zuerst mobil), das ist der Trick! Vielen Dank!
Wietse
In Bootstrap v4 heißen sie jetzt {push / pull} - {vp} - {1-12}, z. B. push-md-4
pasql
36

Ziehen Sie "zieht" das Div nach links vom Browser und drücken Sie "drückt" das Div von links vom Browser weg.

Mögen: Geben Sie hier die Bildbeschreibung ein

Grundsätzlich wird in einem dreispaltigen Layout einer Webseite der "Hauptteil" in der "Mitte" und in der Ansicht "Mobil" der "Hauptteil" oben in der Seite angezeigt. Dies wird meistens von jedem mit 3-Spalten-Layout gewünscht.

<div class="container">
    <div class="row">
        <div id="content" class="col-lg-4 col-lg-push-4 col-sm-12">
        <h2>This is Content</h2>
        <p>orem Ipsum ...</p>
        </div>

        <div id="sidebar-left" class="col-lg-4  col-sm-6 col-lg-pull-4">
        <h2>This is Left Sidebar</h2>
        <p>orem Ipsum...</p>
        </div>


        <div id="sidebar-right" class="col-lg-4 col-sm-6">
        <h2>This is Right Sidebar</h2>
        <p>orem Ipsum.... </p>
        </div>
    </div>
</div>

Sie können es hier anzeigen: http://jsfiddle.net/DrGeneral/BxaNN/1/

Ich hoffe es hilft

Allgemeines
quelle
3
Drücken und Ziehen "keine Ränder zuweisen". Sie ändern die Spaltenreihenfolge. In Ihrem Beispiel würde die Spalte " Inhalt" normalerweise die Spalten 1 bis 4 in großer Größe und die Spalte " Seitenleiste" die Spalten 5 bis 8 belegen. Dies basiert auf ihrer Reihenfolge im Markup. Sie können ihre Reihenfolge ändern, indem Sie sie im Markup ändern. Wenn Sie dies jedoch aus irgendeinem Grund nicht möchten (z. B. um den Code zuerst mit dem Hauptinhalt semantischer zu gestalten), können Sie ihre Reihenfolge mit Push- und Pull-Klassen ändern.
T Nguyen
1
(Fortsetzung) In Ihrem Beispiel col-lg-push-4ändert das Hinzufügen die Inhaltsspalte von den Spalten 1-4 auf 5-8, indem 4 Spalten 'gedrückt' werden. In ähnlicher Weise wird col-lg-pull-4die Sidebar- Spalte von 5-8 auf 1-4 gezogen.
T Nguyen
1
col - $$ - offset-XX wendet Rand-Links-Werte an
beauXjames
16

Missverständnis Häufiges Missverständnis bei der Spaltenreihenfolge ist, dass ich das Drücken und Ziehen auf Mobilgeräten ausführen sollte (oder könnte) und dass die Desktop-Ansichten in der natürlichen Reihenfolge des Markups gerendert werden sollten. Das ist falsch.

Reality Bootstrap ist ein mobiles erstes Framework. Dies bedeutet, dass die Reihenfolge der Spalten in Ihrem HTML-Markup der Reihenfolge entsprechen sollte, in der sie auf Mobilgeräten angezeigt werden sollen. Dies bedeutet, dass das Drücken und Ziehen in den größeren Desktop-Ansichten erfolgt. nicht auf mobilen Geräten anzeigen ..

Brandon Schmalz - Full Stack Webentwickler Eine vollständige Beschreibung finden Sie hier

Syed Ali
quelle
15

Ich hatte nur das Gefühl, ich werde meine $ 0,2 zu diesen 2 guten Antworten hinzufügen. Ich hatte einen Fall, in dem ich die letzte Spalte in einer 3-Spalten-Situation ganz nach oben verschieben musste.

[ABC]

zu

[C]

[EIN]

[B]

Boostraps Klasse .col-xx-push-Xmacht nichts anderes, als eine Spalte mit nach rechts zu schiebenleft: XX%; Alles, was Sie tun müssen, um eine Spalte nach rechts zu verschieben, ist die Anzahl der Pseudospalten nach links zu addieren.

In diesem Fall:

  • zwei Spalten ( col-md-5und col-md-3) gehen nach links, jede mit dem Wert der einen, die nach rechts geht;

  • one ( col-md-4) geht nach rechts durch die Summe der ersten beiden nach links (5 + 3 = 8);


<div class="row">
    <div class="col-md-4 col-md-push-8 ">
        C
    </div>
    <div class="col-md-5 col-md-pull-4">
        A
    </div>
    <div class="col-md-3 col-md-pull-4">
        B
    </div>
</div>

Geben Sie hier die Bildbeschreibung ein

Kuba
quelle
2

Wenn Sie Daten abhängig von der Größe des Ansichtsfensters in Spalten von 1/2/4 organisieren müssen, ist Push and Pull möglicherweise überhaupt keine Option. Unabhängig davon, wie Sie Ihre Artikel bestellen, kann eine der Größen zu einer falschen Bestellung führen.

Eine Lösung in diesem Fall besteht darin, verschachtelte Zeilen und Spalten ohne Push- oder Pull-Klassen zu verwenden.

Beispiel

In XS willst du ...

A
B
C
D
E
F
G
H

In SM wollen Sie ...

A   E
B   F
C   G
D   H

In MD und höher möchten Sie ...

A   C   E   G
B   D   F   H


Lösung

Verwenden Sie verschachtelte untergeordnete zweispaltige Elemente in einem umgebenden zweispaltigen übergeordneten Element:

Hier ist ein funktionierender Ausschnitt:

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript" ></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-sm-6">
    <div class="row">
      <div class="col-md-6"><p>A</p><p>B</p></div>
      <div class="col-md-6"><p>C</p><p>D</p></div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="row">
      <div class="col-md-6"><p>E</p><p>F</p></div>
      <div class="col-md-6"><p>G</p><p>H</p></div>
    </div>
  </div>
</div>

Eine weitere Schönheit dieser Lösung besteht darin, dass die Elemente im Code in ihrer natürlichen Reihenfolge (A, B, C, ... H) angezeigt werden und nicht gemischt werden müssen, was für die CMS-Generierung hilfreich ist.

Jpsy
quelle