Liczba kolumn w jednym wierszu będzie dynamiczna, może wynieść 2, a może 5.
Nie bardzo mi się chce zaprzęgać do tego PHP i wolałbym aby to było po stronie css.
Korzystam z Boostrap, czy tam da się w jednym .row dać dowolną liczbę kolumn tak aby było działało to jak mniej więcej col-md-X gdzie X jest właśnie niewiadomą?
https://www.bootply.com/RuRv7e70sD
Czyli jak będą 3 to będą 3, jak będzie 12 to będzie ich 12 odpowiednio mniejsze. Ciągle wszystko full width.
Gdy dam col-md-1 to nie będzie użyta pełna szerokość, jak dam znów coś większego to duża szansa że będzie za dużo i przeskoczy do nowej linii.
Nie wiem, czy się da w bootstrapie. W PHP to dałoby radę to napisać chyba dzięki pętli.
https://medium.com/@fionnachan/dynamic-number-of-rows-and-columns-with-css-grid-layout-and-css-variables-cb8e8381b6f2
https://stackoverflow.com/questions/2117320/set-maximum-displayed-rows-count-for-html-table
http://willschenk.com/bootstrap-advanced-grid-tricks/
https://stackoverflow.com/questions/24175998/meaning-of-numbers-in-col-md-4-col-xs-1-col-lg-2-in-bootstrap
https://github.com/twbs/bootstrap/issues/9454
No ok, w Bootstrap może i nie będzie szło ale już w czystym CSS/HTML chyba by dało radę, przecież to nie brzmi jak jakiś mega wymyślny problem.
Tak, w PHP to bym ogarnął bo już tak raz zrobiłem:
if ($count > 6) { $columnGrid = 1; // 7 ... n } elseif ($count > 4) { $columnGrid = 2; // 5 ... 6 } elseif ($count > 3) { $columnGrid = 3; // 4 } elseif ($count > 2) { $columnGrid = 4; // 3 } else { $columnGrid = 6; // 2 or 1 }
Bootstrap v4 jest oparty o flex.
Dopiero Natywny Grid jest bardzo fajny.
A co do problemu to właśnie można utworzyć .row i nadać mu właściwości flex. https://stackoverflow.com/a/31935155/3732803
Mmm.. Aż się dziwie, że to taka nowość.. Trzeba się troszkę poduczyć na nowo bo nie wszystko działa tak jak byśmy się od razu spodziewali (np. z statyczną szerokością jednej z kolumn) ale generalnie miodzio, nawet nie pytam o kompatybilność
Efekt, o który mi chodziło (nie znam z góry ilości kolumn w pliku):
http://prntscr.com/griigy
Kod ostateczny:
.flex-row { display: flex; flex: auto; } .flex-column { flex: 1; min-height: 1px; padding-left: 10px; padding-right: 10px; }
style="flex: 0 0 60px"
Węszę importer z CSV
http://prntscr.com/griu7q
Paniee Laravel-Excel i xls czy ods niestraszny
Ja polecam http://flexboxgrid.com/
Nazewnictwo zgodne mniej-więcej z bs3, więc łatwo się przesiąść
Generalnie flexbox.
Generalnie to przyszłość jest w Grid
W grid plus flex. Grid jest dobry ale do budowania layoutu ogólnego. Gorzej jak trzeba coś dokładniej ułożyć.
W tym konkretnym projekcie jest już użyty premium template oparty o Bootstrap więc troszkę słabe aby zaprzęgać równolegle drugi framework, zwłaszcza, że póki co BS dobrze się sprawdza przy większości widoków no i ktoś tu wspomniał, że BS też idzie w stronę flex'a więc wystarczy poczekać.
@viking ja mówię o tym grid: https://css-tricks.com/snippets/css/complete-guide-grid/
<?php $count =3; for($u=7;$u>6;$u--){ $arr4[]=$u; } for($u2=4;$u2>3;$u2--){ $arr5[]=$u2; } for($j=5;$j>=4;$j--){ $arr[] = $j; } for($i=3;$i>=2;$i--){ $arr2[]=$i; } for($k=3;$k<=4;$k++){ $arr3[]=$k; } $arr5[1]=null; $arr4[1]=null; for($r=0;$r<=1;$r++){ if($count>$arr2[$r] && $count<$arr[$r]){ $grid = $arr3[$r]; }else if($count > $arr5[$r] && $count < $arr4[$r]){ $grid = 2; }else if($count > 6){ $grid = 1; }else if($count < 3){ $grid = 6; } } for($y=1;$y<=$grid;$y++){ http://www.php.net/echo "<span style='color:red'>red</span>"; } ?>
A to co
Ale Grid jako narzędzie do tworzenia template jest całkiem niezły. Owszem nie wszędzie i nie zawsze wszystko.
Wszystko z umiarem
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)