Comment faire en sorte qu'un Bootstrap à 3 colonnes s'étende sur plusieurs lignes ?

Étendre des colonnes Bootstrap sur plusieurs lignes

Créer une disposition en grille avec Bootstrap peut être une tâche simple. Cependant, face au défi d’avoir une colonne s’étendant sur plusieurs lignes, cela peut être un peu déroutant. Ce guide montrera comment y parvenir à l'aide de Bootstrap 3.

Solution pour Bootstrap 3 :

Pour créer une colonne qui s'étend sur deux lignes dans Bootstrap 3, suivez ces étapes :

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

Explication :

Dans ce Code HTML, nous créons une grille à deux lignes. La première ligne contient une colonne couvrant quatre unités, tandis que la deuxième ligne contient deux colonnes couvrant chacune deux unités. La colonne de la première ligne s'étend sur deux lignes car elle n'est pas contenue dans la structure de lignes imbriquées.

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!