18041 sujets

Questions générales et questions de débutants

[Résolu] Liste sur plusieurs colonnes avec Bootsrap

Bonjour,

J'ai donc une longue liste de déchets.
Merci Bootstrap, je peux afficher cette liste sur 2 ou 3 colonnes selon la taille de l'écran.

Oui mais voilà...
Quand l'écran se réduit, en effet la liste s'affiche sur 2 colonnes, ou sur 1 seule colonne, mais à chaque fois j'ai une ligne d'espace.
upload/1593007784-79834-captureliste.png

le code : 

<div class='row'>
                <div class='col-xl-4 col-md-6'>
                    <ul>
                        <li>batteries</li>
                        <li>bois</li>
                        <li>cartons</li>
                        <li>cartouches d’encres</li>
                        <li>déchets dangereux</li>
                        <li>déchets verts</li>
                        <li>déchets électriques</li>
                    </ul>
                </div>
                <div class='col-xl-4 col-md-6'>
                    <ul>
                        <li>encombrants</li>
                        <li>huiles alimentaires</li>
                        <li>inertes</li>
etc...

Forcément, entre 2 div...

Y aurait-il par hasard un moyen, en css ou html, de supprimer cet espace inutile ?
Enfin, quelque chose qui ne soit pas une usine à gaz Smiley lol

Merci d'avance Smiley biggrin
Modérateur
Et l'eau,

*j'ai pas testé, avec un regard extérieur :

solution 1: 

<div class='row'>
    <ul class='col-xl-4 col-md-6'>
        <li>batteries</li>
        <li>bois</li>
        <li>cartons</li>
        <li>cartouches d’encres</li>
        <li>déchets dangereux</li>
        <li>déchets verts</li>
        <li>déchets électriques</li>
    </ul>
    <ul class='col-xl-4 col-md-6'>
        <li>encombrants</li>
        <li>huiles alimentaires</li>
        <li>inertes</li>
    </ul>
</div>


solution 2:

<div class='row extra'>
    <div class='col-xl-4 col-md-6'>
        <ul>
            <li>batteries</li>
            <li>bois</li>
            <li>cartons</li>
            <li>cartouches d’encres</li>
            <li>déchets dangereux</li>
            <li>déchets verts</li>
            <li>déchets électriques</li>
        </ul>
    </div>
    <div class='col-xl-4 col-md-6'>
        <ul>
            <li>encombrants</li>
            <li>huiles alimentaires</li>
            <li>inertes</li>
        </ul>
    </div>
</div>




.row.extra div{
    //etc.
}

Modifié par niuxe (24 Jun 2020 - 16:19)
Meilleure solution
la solution 1 ne fonctionne pas......entre les ul aussi il passe une ligne Smiley bawling

Mais la 2 fonctionne.

En css j'ai mis : 

.row.extra ul {
    margin: 0;    
}


et c'est tout, c'est impeccable.

Merci beaucoup niuxe Smiley clapclap
Modifié par Thia (24 Jun 2020 - 16:48)
Sujet clos
Aller à