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 pull
lub push
oznacza. Więc coś mi brakuje?
Dzięki.
źródło
Odpowiedzi:
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
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: relative
na 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-5
przesunie tylko 5 kolumn nasm
portach 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.PRÓBNY
Widok portu> = sm
Widok portu <sm
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.
.order-*
klas do kontrolowania porządku wizualnego (gdzie * = 1 do 12).order-md-*
.order-first
(-1) i.order-last
(13)źródło
col-lg-push
co powiedziałeś. Wielkie dzięki.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.
Możesz go zobaczyć tutaj: http://jsfiddle.net/DrGeneral/BxaNN/1/
Mam nadzieję, że to pomoże
źródło
col-lg-push-4
naszym przykładzie dodanie zmienia kolumnę Treść z kolumn 1-4 na 5-8 poprzez „wypchnięcie” 4 kolumn. Podobniecol-lg-pull-4
„ciągnie” kolumnę paska bocznego z 5-8 do 1-4.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 ...
źródło
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-5
icol-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);źródło
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 ...
W SM chcesz ...
W MD i powyżej chcesz ...
Rozwiązanie
Użyj zagnieżdżonych dwukolumnowych elementów potomnych w otaczającym dwukolumnowym elemencie nadrzędnym:
Oto działający fragment:
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.
źródło