[Bootstrap] Dynamiczna liczba kolumn Opcje

[markonix]

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.

Ten post edytował markonix 30.09.2017, 11:53:14

[Neutral]

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-numb...es-cb8e8381b6f2
https://stackoverflow.com/questions/2117320...-for-html-table
http://willschenk.com/bootstrap-advanced-grid-tricks/
https://stackoverflow.com/questions/2417599...-2-in-bootstrap
https://github.com/twbs/bootstrap/issues/9454

[markonix]

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:

[PHP] pobierz, plaintext 
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
}
[PHP] pobierz, plaintext 

Ale szczerze? Słabe to no i przy niektórych opcjach np. 11 kolumnach zostanie odstęp, a ja bym chciał aby te 11 kolumn rozciągnęło się na pełną szerokość.

Ten post edytował markonix 30.09.2017, 11:53:21

[viking]

Bootstrap v4 jest oparty o flex.

[Pyton_000]

Dopiero (IMG:style_emoticons/default/smile.gif) 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

[markonix]

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ść (IMG:style_emoticons/default/smile.gif)

Efekt, o który mi chodziło (nie znam z góry ilości kolumn w pliku):
http://prntscr.com/griigy

Kod ostateczny:

[CSS] pobierz, plaintext 
.flex-row {
    display: flex;
    flex: auto;
}
 
.flex-column {
    flex: 1;
    min-height: 1px;
    padding-left: 10px;
    padding-right: 10px;
}
[CSS] pobierz, plaintext 

Statyczna szerokość kolumny:

[HTML] pobierz, plaintext 
 style="flex: 0 0 60px" 
[HTML] pobierz, plaintext 

Ten post edytował markonix 30.09.2017, 11:45:52

[Pyton_000]

Węszę importer z CSV (IMG:style_emoticons/default/smile.gif)

[markonix]

http://prntscr.com/griu7q

Paniee (IMG:style_emoticons/default/wink.gif) Laravel-Excel i xls czy ods niestraszny (IMG:style_emoticons/default/wink.gif)

Ten post edytował markonix 30.09.2017, 12:25:28

[prowseed]

Ja polecam http://flexboxgrid.com/
Nazewnictwo zgodne mniej-więcej z bs3, więc łatwo się przesiąść (IMG:style_emoticons/default/smile.gif)

Generalnie flexbox.

[Pyton_000]

Generalnie to przyszłość jest w Grid (IMG:style_emoticons/default/wink.gif)

[viking]

W grid plus flex. Grid jest dobry ale do budowania layoutu ogólnego. Gorzej jak trzeba coś dokładniej ułożyć.

[markonix]

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

[Pyton_000]

@viking ja mówię o tym grid: https://css-tricks.com/snippets/css/complete-guide-grid/

[Neutral]

[PHP] pobierz, plaintext 
<?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++){
	echo "<span style='color:red'>red</span>";
}
 
?>
[PHP] pobierz, plaintext 

[Pyton_000]

A to co (IMG:style_emoticons/default/biggrin.gif)

[Comandeer]

Generalnie to przyszłość jest w Grid

Już nie przeginajmy… Obecnie mamy modę na "flex all the things" i nawet jak ktoś chce zrobić opływanie obrazka, to mu się wciska flexboxa. Nie chcę, żeby za rok do opływania obrazka polecano mu grida.

CSS Grid jest dość skomplikowanym narzędziem i czasami jest armatą na muchę.

[Pyton_000]

Ale Grid jako narzędzie do tworzenia template jest całkiem niezły. Owszem nie wszędzie i nie zawsze wszystko.

Wszystko z umiarem (IMG:style_emoticons/default/smile.gif)

[prowseed]

Już nie przeginajmy… Obecnie mamy modę na "flex all the things" i nawet jak ktoś chce zrobić opływanie obrazka, to mu się wciska flexboxa. Nie chcę, żeby za rok do opływania obrazka polecano mu grida.

CSS Grid jest dość skomplikowanym narzędziem i czasami jest armatą na muchę.

Ale Grid jako narzędzie do tworzenia template jest całkiem niezły. Owszem nie wszędzie i nie zawsze wszystko.

Wszystko z umiarem (IMG:style_emoticons/default/smile.gif)

Dlatego tak jak napisał viking - flex + grid. Korzystam z grida na co dzień, bo jest ultrawygodny i ma pełne wsparcie, flex wniósł dużo świeżości do pozycjonowania el. na stronie.

Jak ktoś się słucha głupich rad i nie potrafi sam pomyśleć, to niestety, być może użyje flexa wtedy, kiedy nie powinien, natomiast flex+grid to w końcu krok w kierunku oderwania css od layout'owania w stylu "Word 97".