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

Bootstrap - Disposition à 5 colonnes

Vous souhaitez obtenir une mise en page pleine largeur à 5 colonnes à l'aide de Bootstrap mais vous n'avez pas trouvé de solution qui correspond à vos besoins.

Bootstrap 4 propose une solution simple utilisant la grille de mise en page automatique. Pour créer 5 colonnes égales de pleine largeur, utilisez le code suivant :

<code class="html"><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></code>

Cette solution fonctionne car Bootstrap 4 utilise flexbox. Pour envelopper les colonnes dans la même ligne, utilisez un saut clearfix tel que

Pour Bootstrap 4.4 et versions ultérieures, vous pouvez utiliser la classe row-cols-5 sur la ligne :

<code class="html"><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></code>

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!