organizuje 3-kolumna 2-kolumny w Twitter Bootstrap 3

Więc to całkowicie pracuje (wychodzi z kolumny 4 i 2 na małych ekranach):organizuje 3-kolumna 2-kolumny w Twitter Bootstrap 3

<div class="row"> 
    <div class="col-lg-3 col-sm-6"> 1</div> 
    <div class="col-lg-3 col-sm-6"> 2</div> 
    <div class="col-lg-3 col-sm-6"> 3</div> 
    <div class="col-lg-3 col-sm-6"> 4</div> 
</div>

podobnie jak mój 3-kolumny, jednak środkowa kolumna zostaje ułożona na wierzchu trzeciej (która jest wtedy prawą/drugą kolumną).

<div class="row" id="footer"> 
    <div class="col-lg-3 col-sm-6"> 
     1 
    </div> 
    <div class="col-lg-3 col-sm-6"> 
     2 
    </div> 
    <div class="col-lg-6 col-sm-6"> 
     3 
    </div> 
</div>

Jak odróżnić środkową kolumnę powyżej lub poniżej pierwszej kolumny? col-sm-pull-6 nie działa na przykład.

Pożądany wynik:

1 - 3 
2 - ..

Problem z włączeniem 2 i 3, a następnie za pomocą i wypychania, że 2nd column wciąż idzie do góry 3 kolumny. I potrzebuję ich, aby były jak na moim pożądanym schemacie wyników.

Edycja: Co mogę zrobić, to podać pierwszą kolumnę col-sm-12. Spowoduje to opuszczenie pozostałych 2. W ten sposób kolejność jest dobra, a ponieważ chodzi o stopkę, fakt, że kolumna akapitu znajduje się na samym dole, również nie jest zły. Ale wciąż jestem otwarty na lepsze sugestie.

Siatka teraz wygląda tak:

1 
2 - 3

Źródło

2013-08-15 Gerben Jacobs

Niestety, przeglądarka nie działa w modzie up-up-up (reverse "N"). Działa w stylu "Z". więc jedynym sposobem, aby działał tak, jak chcesz (zakładam, że btw) jest ponowne przypisanie środkowej kolumny jako ostatniej kolumny przy użyciu JS. Nadzieja, która pomaga. – peterchon

klasy 'push' i' pull' * powinny * robić to, jeśli są używane poprawnie. Trudno wyobrazić sobie, co masz na myśli całkowicie. Czy umiesz ustawić skrzypce? –

Oto jfiddle mojego przykładu. Chcę, aby listy linków były po lewej stronie, a akapit do drugiej strony (6 kol); http://jsfiddle.net/gjacobs/knjhT/ –

Więc tu idzie,

przede wszystkim należy użyć projekty dla mniejszych ekranów PRZED większych ekranów tak:

<div class="col-sm-6 col-lg-3"> (...)

Teraz, aby Twój projekt się spełnił, musisz to zrobić:

<div class="col-sm-6 col-lg-3"> 
1 
</div> 
<div class="col-sm-6 col-lg-3 col-lg-push-3"> 
3 
</div> 
<div class="col-sm-6 col-lg-3 col-lg-pull-3"> 
2 
</div>

... to, co zrobiłem, to to, że odwróciłem drugą z trzecią kolumną, aby pasowały do moich potrzeb na mniejszym ekranie, a następnie za pomocą funkcji "pchnij i pociągnij" dostosowałem dla większych ekranów.

edit: o to skrzypce robocze:

http://jsfiddle.net/ujrwyrbr/2/

Źródło

2014-10-19 00:23:18 scooterlord

Koniecznie uważaj na div, które mają różne wysokości. Powoduje to, że rzeczy nie zawijają się w lewo, jak można się spodziewać.

Można to rozwiązać za pomocą startowej clearfix (nawet warunkowo) z czymś takim:

<div class="clearfix visible-sm"></div>

Put że po div gdzie tylko chcesz, aby rozpocząć nowy wiersz na wielkość -SM. Powtórz w razie potrzeby.

Źródło

2016-09-17 02:32:00

organizuje 3-kolumna 2-kolumny w Twitter Bootstrap 3

Odpowiedz

Powiązane problemy