Czytam teraz dokumentację na Twitterze Bootstrap 3 i próbowałem śledzić kolejność kolumn, jak pokazano na tej stronie, ale trafiłem na ścianę. Nie rozumiem, dlaczego taki kod działa ani jak poprawnie określić ustawienie. To, co chcę pokazać, to jedna siatka, która składa się z długości 5 i drugiej długości 5, a na końcu jednej siatki o długości 2.

Więc moje jest coś takiego:

[5] [5] [2]

I chcę osiągnąć, kiedy jest oglądany na Pulpicie powyższy układ jest wyświetlany, ale kiedy jest oglądany na urządzeniu mobilnym, chcę najpierw pokazać obiekt o drugiej długości 5, następnie obiekt o pierwszej długości 5, a na końcu obiekt o długości 2 pionowo. Lubię to:

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

Podczas gdy próbowałem postępować zgodnie z krokiem wyjaśnionym w powyższej dokumentacji, uzyskałem obiekt o pierwszej długości 5 w porównaniu z drugim, mimo że znajdowałem się na platformach mobilnych, które, jak powiedziałem, powinny wyświetlać obiekt drugiej długości 5 na górze. Innymi słowy, mam to:

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

Jak więc poprawnie umieścić drugą na pierwszej? Lub skoro używam obiektu o tej samej długości, czy kolejność kolumn może nie działać?

Oto mój kod do twoich informacji:

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

Ponadto dokumentacja nie wyjaśnia, co pulllub pushoznacza. Więc coś mi brakuje?

Dzięki.

Ta odpowiedź jest w trzech częściach, zobacz poniżej oficjalne wydanie (v3 i v4)

Nie mogłem nawet znaleźć klas col-lg-push-x lub pull w oryginalnych plikach dla RC1, które pobrałem, więc sprawdź plik bootstrap.css. miejmy nadzieję, że to jest coś, co rozwiążą w RC2.

w każdym razie klasy col-push- * i pull rzeczywiście istniały i będzie to odpowiadało Twoim potrzebom. Oto 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>

EDYCJA: PONIŻEJ ODPOWIEDŹ NA OFICJALNE WYDANIE WERSJI 3.0

Zobacz także ten wpis na blogu na ten temat

• col-vp-push-x= przesuń kolumnę w prawo o x liczbę kolumn, zaczynając od miejsca, w którym kolumna normalnie renderowałaby się -> position: relative, na porcie vp lub większym.

• col-vp-pull-x= przeciągnij kolumnę w lewo o x liczbę kolumn, zaczynając od miejsca, w którym kolumna byłaby normalnie renderowana -> position: relativena porcie widoku vp lub większym.

  vp = xs, sm, md lub lg

  x = od 1 do 12

Myślę, że to, co denerwuje większość ludzi, to to, że musisz zmienić kolejność kolumn w swoim znaczniku HTML (w poniższym przykładzie B jest przed A) i że tylko wypycha lub pobiera porty widoku, które są większy lub równy temu, co określono. tzn. col-sm-push-5przesunie tylko 5 kolumn na smportach widoku lub większych. Dzieje się tak, ponieważ Bootstrap jest frameworkiem „przede wszystkim mobilnym”, więc kod HTML powinien odzwierciedlać mobilną wersję witryny. Pchanie i Ciągnięcie są następnie wykonywane na większych ekranach.

• (Komputer stacjonarny) Większe porty widoku są popychane i ciągnięte.
• (Urządzenia mobilne) Mniejsze porty widoku renderują się w normalnej kolejności.

PRÓBNY

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

Widok portu> = sm

|A|B|C|

Widok portu <sm

|B|
|A|
|C|

EDYCJA: PONIŻEJ ODPOWIEDŹ NA V4.0

Wraz z wersją 4 jest flexbox i inne zmiany w systemie grid, a klasy push \ pull zostały usunięte na korzyść korzystania z porządkowania flexbox.

• Użyj .order-*klas do kontrolowania porządku wizualnego (gdzie * = 1 do 12)
• Może to być również specyficzne dla warstwy sieci .order-md-*
• Dostępne również .order-first(-1) i .order-last(13)

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

Pociągnij „ciągnie” element div w kierunku lewej strony przeglądarki, a wypchnij „wypycha” element div z lewej strony przeglądarki.

Lubić:

W zasadzie w układzie 3-kolumnowym dowolnej strony internetowej „Treść główna” pojawia się w „Centrum”, a w widoku „Komórka” „Treść główna” pojawia się na „Górze” strony. Jest to najbardziej pożądane przez wszystkich z układem 3 kolumn.

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

Możesz go zobaczyć tutaj: http://jsfiddle.net/DrGeneral/BxaNN/1/

Mam nadzieję, że to pomoże

Błędne przekonanie Powszechne błędne przekonanie dotyczące porządkowania kolumn polega na tym, że powinienem (lub mógłbym) wykonywać wypychanie i ciągnięcie na urządzeniach mobilnych oraz że widoki pulpitu powinny renderować się w naturalnej kolejności znaczników. To jest źle.

Reality Bootstrap to framework dla urządzeń mobilnych. Oznacza to, że kolejność kolumn w znaczniku HTML powinna odpowiadać kolejności, w jakiej mają być wyświetlane na urządzeniach mobilnych. Oznacza to, że pchanie i ciągnięcie odbywa się na większych widokach pulpitu. nie w widoku urządzeń mobilnych ...

Brandon Schmalz - programista sieciowy Full Stack Zobacz pełny opis tutaj

Po prostu poczułem, że do tych 2 dobrych odpowiedzi dodam 0,2 dolara. Miałem przypadek, kiedy musiałem przenieść ostatnią kolumnę na samą górę w sytuacji z 3 kolumnami.

[ABC]

do

[DO]

[ZA]

[B]

Klasa Boostrapa .col-xx-push-X nie robi nic innego, jak tylko kolumnę w prawo, left: XX%; więc wszystko, co musisz zrobić, aby przesunąć kolumnę w prawo, to dodać liczbę pseudo kolumn w lewo.

W tym przypadku:

• dwie kolumny ( col-md-5icol-md-3 ) idą w lewo, każda z wartością tej, która idzie w prawo;

• one ( col-md-4) idzie w prawo o sumę dwóch pierwszych idących w lewo (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>

Jeśli potrzebujesz uporządkować dane w kolumnach 1/2/4 w zależności od rozmiaru widocznego obszaru, wtedy wypychanie i wyciąganie może nie być żadną opcją. Bez względu na to, w jaki sposób zamówisz swoje produkty w pierwszej kolejności, jeden z rozmiarów może spowodować niewłaściwą kolejność.

Rozwiązaniem w tym przypadku jest użycie zagnieżdżonych wierszy i kolumn bez żadnych klas push lub pull.

Przykład

W XS chcesz ...

A
B
C
D
E
F
G
H

W SM chcesz ...

A   E
B   F
C   G
D   H

W MD i powyżej chcesz ...

A   C   E   G
B   D   F   H

Rozwiązanie

Użyj zagnieżdżonych dwukolumnowych elementów potomnych w otaczającym dwukolumnowym elemencie nadrzędnym:

Oto działający fragment:

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

Kolejną zaletą tego rozwiązania jest to, że elementy pojawiają się w kodzie w ich naturalnej kolejności (A, B, C, ... H) i nie muszą być tasowane, co jest dobre dla generowania CMS.