Comment créer une mise en page à cinq colonnes dans Bootstrap ?

Disposition de colonnes Bootstrap à 5 colonnes

Dans cette question, l'utilisateur tente de créer une disposition à cinq colonnes à l'aide de Bootstrap mais rencontre des problèmes. Pour résoudre ce problème, nous explorerons différentes approches en utilisant diverses classes Bootstrap et un système de grille.

Utilisation des classes de conteneur et de ligne

Le code initial fourni par l'utilisateur incluait une classe de conteneur avec une ligne et plusieurs colonnes imbriquées. Pour obtenir une véritable mise en page à cinq colonnes avec des largeurs égales, l'approche grille de mise en page automatique utilisée dans Bootstrap 4 offre une solution plus simple.

Grille de mise en page automatique (Bootstrap 4)

En utilisant la classe conteneur-fluid au lieu de conteneur, vous pouvez créer une grille de mise en page automatique qui distribue automatiquement des largeurs égales aux éléments enfants. Les éléments div imbriqués dans la ligne rempliront alors la largeur du conteneur de manière égale.

<div class="container-fluid">
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
    </div>
</div>

Classe row-cols-5 (Bootstrap 4.4 et versions ultérieures)

À partir de Bootstrap 4.4, une nouvelle classe appelé row-cols-5 a été introduit. Cette classe simplifie la création d'une mise en page à cinq colonnes dans une rangée.

<div class="container">
    <div class="row row-cols-5">
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
        <div class="col">
            X
        </div>
    </div>
</div>

En utilisant ces approches, vous pouvez créer une mise en page à cinq colonnes flexible et réactive à l'aide de Bootstrap. N'oubliez pas d'ajuster les classes en fonction de la version spécifique de Bootstrap que vous utilisez.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!