Comment créer des colonnes à plusieurs lignes dans Bootstrap 3 et Bootstrap 4 ?

Colonnes Bootstrap à plusieurs lignes

Problème :
Création d'une grille Bootstrap où une colonne spécifique s'étend sur plusieurs lignes, en particulier lorsque les boîtes sont générées par programme dans séquence.

Solution :

Bootstrap 3 :

1. Créer un div .row externe pour définir l'ensemble largeur du contenu.
2. À l'intérieur de la ligne extérieure, ajoutez la colonne div (
   ) pour s'étendre sur deux lignes.
3. Créez un autre .row intérieur dans la colonne à deux lignes.
4. Ajoutez des divs de colonne enfant (
   ) dans la ou les rangées intérieures si nécessaire pour remplir l'espace restant .

Bootstrap 4 :

1. Créez un div externe .container ou .container-fluid pour définir la largeur du contenu.
2. Ajoutez un div .row externe.
3. À l'intérieur de la ligne extérieure, ajoutez la colonne div (
   ) pour s'étendre sur deux rows.
4. Créez un autre .row interne dans la colonne à deux lignes en utilisant la classe .w-100 sur la colonne interne div (
   ) pour la forcer à s'étendre sur toute la largeur.
5. Ajoutez des divs de colonne enfant (
   ) dans la ou les rangées intérieures si nécessaire pour remplir le reste espace.

Exemple de code :

Bootstrap 3 :

<div class="row">
  <div class="col-md-4">
    <div class="well">1
      <br>
      <br>
      <br>
      <br>
      <br>
    </div>
  </div>
  <div class="col-md-8">
    <div class="row">
      <div class="col-md-6">
        <div class="well">2</div>
      </div>
      <div class="col-md-6">
        <div class="well">3</div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="well">4</div>
      </div>
      <div class="col-md-6">
        <div class="well">5</div>
      </div>
    </div>
  </div>
</div><p><strong>Bootstrap 4 : </strong></p>
<pre class="brush:php;toolbar:false"><div class="container">
  <div class="row">
    <div class="col">
      <div class="well">1
        <br>
        <br>
        <br>
        <br>
        <br>
      </div>
    </div>
    <div class="row w-100">
      <div class="col">
        <div class="well">2</div>
      </div>
      <div class="col">
        <div class="well">3</div>
      </div>
    </div>
    <div class="row w-100">
      <div class="col">
        <div class="well">4</div>
      </div>
      <div class="col">
        <div class="well">5</div>
      </div>
    </div>
  </div>
</div>

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!