Comment puis-je créer une mise en page à 5 colonnes dans Bootstrap ?-tutoriel CSS-php.cn

Comment puis-je créer une mise en page à 5 colonnes dans Bootstrap ?

Patricia Arquette

Libérer： 2024-10-27 10:05:31

original

378 Les gens l'ont consulté

How can I create a 5-column layout in Bootstrap?

Bootstrap - Création d'une mise en page à 5 colonnes

Dans Bootstrap, la création d'une mise en page avec cinq colonnes pleine largeur peut être réalisée en utilisant les méthodes suivantes :

Option 1 : Grille de mise en page automatique (Bootstrap 4)

Pour Bootstrap 4, utilisez la grille de mise en page automatique pour créer cinq colonnes de largeur égale et pleine largeur :

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

Copier après la connexion

Option 2 : Clearfix Break (Bootstrap 4)

Pour envelopper les colonnes dans la même ligne, insérez un clearfix break toutes les cinq colonnes :

<code class="html"><div class="container">
    <div class="row">
        <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-12"></div> <!-- Clearfix break -->
        <div class="col">X</div>
    </div>
</div></code>

Copier après la connexion

Option 3 : row-cols-5 Classe (Bootstrap 4.4)

Pour les versions Bootstrap 4.4 et ultérieures, utilisez la classe row-cols-5 sur l'élément row :

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

Copier après la connexion

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!