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

Question 1

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.

Question 2

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>

Erweitern Sie das Snippet

Question 3

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

Question 4

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

Question 5

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

Question 6

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>

Erweitern Sie das Snippet

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.