Bootstrap3 – uspořádání divů

13. 2. 2015 13:49:00

Ahoj,

řeším poskládání několika divů v bootstrap3. Přikládám obrázek, kde je zobrazen výsledek.

Problém je, že výška divů je různá. Protože div 2 je vyšší než div 3, tak se div 4 nezařadí pod div 1, ale zařadí se pod div 2. A div 5 začíná na dalším řádku.

V kódu jsou všechny divy definovány jako . Samozřejmě mě napadlo tyto divy po třech obalit do , ale pak by nastal problém na mobilu, kde by byly vždy dva divy vedle sebe pak jen jeden a pak zase dva (col-xs-6).

Asi se na celý problém dívám špatně, ale nějak mě nenapadá jak elegantně tuto situaci vyřešit. Divů může být v plikaci přes deset.

Dík za vaše případné postřehy.

14517

13. 2. 2015 13:49:00

https://webtrh.cz/diskuse/bootstrap3-usporadani-divu/#reply1090982

_Antik_

(22 hodnocení)

13. 2. 2015 14:05:08

http://jsfiddle.net/gzybcfnf/

13. 2. 2015 14:05:08

https://webtrh.cz/diskuse/bootstrap3-usporadani-divu/#reply1090981

_Antik_

(22 hodnocení)

13. 2. 2015 14:18:23

Zdá se mi to nebo jsi nenapsal jak to chceš mít (Četl jsem si to několikrát dokola) ?

Možná to bude jedno z toho:

http://jsfiddle.net/gzybcfnf/

http://jsfiddle.net/gzybcfnf/1/

http://jsfiddle.net/gzybcfnf/2/

13. 2. 2015 14:18:23

https://webtrh.cz/diskuse/bootstrap3-usporadani-divu/#reply1090980

Kloban

13. 2. 2015 14:26:51

Omlouvám se za nejasný popis, potřebuju aby ty divy šli postupně za sebou to znamená:

a v případě mobilu/tabletu

Problém je, že každý div může mít rozdílnou výšku a nevím kolik jich celkem bude (u různých článků je různý počet).

---------- Příspěvek doplněn 13.02.2015 v 14:37 ----------

Když nad tím taky přemýšlím tak se to bude muset plnit ne po řádcích ale po sloupcích tak, aby byla výška sloupců s co nejmenším rozdílem. Na uspořádání divů nezáleží, zaleží na efektivním vyplnění plochy.

Asi to není úplně triviální úkol.

Možná bude lepší to vyřešit konstantní výškou divu, s tím že některé divy v sobě budou mít kousíček volného místa... Tím by byl problém vyřešen.

13. 2. 2015 14:26:51

https://webtrh.cz/diskuse/bootstrap3-usporadani-divu/#reply1090979

David Procházka

(39 hodnocení)

13. 2. 2015 15:15:09

Napsal Kloban;1167925
potřebuju aby ty divy šli postupně za sebou

Napsal Kloban;1167925
Na uspořádání divů nezáleží, zaleží na efektivním vyplnění plochy.

Tak se rozhodni

13. 2. 2015 15:15:09

https://webtrh.cz/diskuse/bootstrap3-usporadani-divu/#reply1090978

GrandBlond

(2 hodnocení)

13. 2. 2015 15:34:51

ono to jednoduše nejde...buď si udělej 3 divy jako sloupce a do nich pak vlož ty různě dlouhé divy s články...a nebo to můžeš napozicovat javascriptem (například masonry.desandro.com )

13. 2. 2015 15:34:51

https://webtrh.cz/diskuse/bootstrap3-usporadani-divu/#reply1090977

_Antik_

(22 hodnocení)

13. 2. 2015 20:12:14

Můžeš použít pro novější browsery flex-box (Hezký návod http://css-tricks.com/snippets/css/a-guide-to-flexbox/). Podpora pro prohlížeče: http://caniuse.com/#feat=flexbox

Ukázka použití: http://jsfiddle.net/Lcuws4yL/

Pro starší prohlížeče jedině javascript.

13. 2. 2015 20:12:14

https://webtrh.cz/diskuse/bootstrap3-usporadani-divu/#reply1090976

Vale

(7 hodnocení)

13. 2. 2015 20:55:33

Ja som toto vyriesil pomocou viacerych div class row a triedami hidden visible z bootstrapu. Teda netreba js. Je to vcelku jednoduche a funkcne riesenie.

13. 2. 2015 20:55:33

https://webtrh.cz/diskuse/bootstrap3-usporadani-divu/#reply1090975

Tadeas Jilek

(26 hodnocení)

15. 2. 2015 21:21:59

Kdysi jsem něco podobného řešil, vyřešil jsem to touhle suprovou knihovničkou Masonry.

Masonry ty divy přehází na místa tak, aby to hezky zaplnilo plochu a netvořilo prázdná místa, můžeš si nastavit různou šířku apod., ale jak už jsem řekl, prohází si to ty divy, takže pokud potřebuješ zachovat to seřazení, tak to nebude úplně to pravé ořechové.

15. 2. 2015 21:21:59

https://webtrh.cz/diskuse/bootstrap3-usporadani-divu/#reply1090974

node

(5 hodnocení)

16. 11. 2015 17:01:11

Len pre info, Foundation na to ma equalizer kniznicu.

16. 11. 2015 17:01:11

https://webtrh.cz/diskuse/bootstrap3-usporadani-divu/#reply1090973

Pro odpověď se přihlašte.

Přihlásit