Discussion :

[l.mnu]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[l.mnu]

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[mathieu]

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

[l.mnu]

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

[mathieu]

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.

[NoSmoking]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[l.mnu]

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