Maison >interface Web >tutoriel CSS >Comment faire en sorte qu'un Bootstrap à 3 colonnes s'étende sur plusieurs lignes ?

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

Barbara Streisand
Barbara Streisandoriginal
2024-12-03 09:39:11687parcourir

How to Make a Bootstrap 3 Column Span Multiple Rows?

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

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn