[Bootstrap] Mise en colonne suivant largeur

Bonjour,
J'ai une liste de 18 éléments. Quand je suis en sm je voudrai une colonne de 18 éléments, en md deux colonnes de 9 éléments et xl trois colonnes de 6 éléments.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

<div class='row'> <div class='col-xl-4 col-md-6 col-sm-12'> <ul> <div>Element01</div> <div>Element02</div> <div>Element03</div> <div>Element04</div> <div>Element05</div> <div>Element06</div> </ul> </div> <div class='col-xl-4 col-md-6 col-sm-12'> <ul> <div>Element07</div> <div>Element08</div> <div>Element09</div> <div>Element10</div> <div>Element11</div> <div>Element12</div> </ul> </div> <div class='col-xl-4 col-md-6 col-sm-12'> <ul> <div>Element13</div> <div>Element14</div> <div>Element15</div> <div>Element16</div> <div>Element17</div> <div>Element18</div> </ul> </div> </div>

---

En sm et xl pas de problème mais en md j'ai une première colonne de 12 éléments et la seconde de 6 éléments.
Comment avoir deux colonnes avec le même nombre d'éléments ?

Merci pour votre aide

Enfin j'ai trouvé une solution, je ne sais pas si c'est la bonne mais elle fonctionne.
Je la donne pour information :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<div class="container"> <div class="d-none d-lg-block"> <div class="row"> <div class="col-4">Items01</div> <div class="col-4">Items02</div> <div class="col-4">Items03</div> <div class="col-4">Items04</div> <div class="col-4">Items05</div> <div class="col-4">Items...</div> </div> </div> <div class="d-none d-md-block d-lg-none"> <div class="row"> <div class="col-6">Items01</div> <div class="col-6">Items02</div> <div class="col-6">Items03</div> <div class="col-6">Items...</div> </div> </div> <div class="d-sm-block d-md-none d-lg-none"> <div class="row"> <div class="col-12">Items01</div> <div class="col-12">Items02</div> <div class="col-12">Items03</div> <div class="col-12">Items04</div> <div class="col-12">Items05</div> <div class="col-12">Items...</div> </div> </div> </div>

---

je trouve que c'est dommage de devoir répéter du contenu pour obtenir cela.
si vous avez le temps, essayez peut-être de refaire la mise en page avec "grid" :
https://developer.mozilla.org/fr/doc...SS_Grid_Layout

Bonjour Mathieu,

Je suis d'accord avec toi, la solution que j'ai trouvé n'est pas forcement optimale mais en tant que débutant en CSS-Bootstrap je n'ai trouvé que cette solution pour l'instant.

J'ai essayé ta proposition mais le résultat ne me donne pas la réponse à mon problème. (une colonne pour phone, deux colonnes pour tablettes, 3 colonnes pour ordinateur).

S'il y a une autre solution plus simple à ma proposition, je suis preneur ;)

je pense qu'il suffit de modifier la valeur de "grid-template-columns" pour chaque largeur :
https://developer.mozilla.org/fr/doc...mplate-columns
par exemple grid-template-columns : repeat(3, 1fr); met les cases sur 3 colonnes.

Bonjour,
tout d'abord il faut noter que ta structure de départ était bancale, les éléments <div> ne peuvent pas être des enfants directs d'élément <ul> ce privilège étant réservé aux seuls éléments <li>.

Comme le dit mathieu la duplication des données n'est pas une solution en soit et il est effectivement dommage d'en arriver là.

Si l'on considère que l'ordre des éléments est important, affichage chronologie vertical et non horizontal, tu n'obtiens pas le résultat souhaité au départ avec ta méthode.

BootStrap dit « papa-maman » mais pas encore « fréro-soeurette » !

Il existe pourtant une solution « simple » proposée par CSS avec la mise en page : multi-column layouts, BootStrap ne l'implémente pas.

En se servant des medias-queries, il suffit de redéfinir le nombre de colonnes à prendre en compte, ici par exemple avec 4 colonnes au maximum :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

@media (min-width:576px) { .column-sm-1 { column-count: 1; } } @media (min-width:768px) { .column-md-2 { column-count: 2; } } @media (min-width:992px) { .column-lg-3 { column-count: 3; } } @media (min-width:1200px) { .column-xl-4 { column-count: 4; } }

---

.. c'est tellement simple que c'en est déroutant, j'ai même poussé le jeu jusqu'à attribuer des noms de classe à la BootStrap :mrgreen:

Maintenant tu peux appliquer la structure suivante pour obtenir ton résultat

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<div class="column column-xl-4 column-lg-3 column-md-2 column-sm-1"> <div>Element01</div> <div>Element02</div> <div>Element03</div> <div>Element04</div> <div>Element05</div> <div>Element06</div> <div>Element07</div> <div>Element08</div> <div>Element09</div> <div>Element10</div> <div>Element11</div> <div>Element12</div> <div>Element13</div> <div>Element14</div> <div>Element15</div> <div>Element16</div> <div>Element17</div> <div>Element18</div> </div>

---

Pour être honnête, il y a sûrement un moyen (ou pas) d'y arriver avec BootStrap et quelque chose comme la classe flex-column mais bon ...

Bonjour NoSmoking,
J'ai essayé ta solution, effectivement elle est vraiment plus simple !!!
Merci beaucoup