Comment puis-je créer des colonnes à plusieurs lignes avec Bootstrap ?

Création de colonnes Bootstrap à plusieurs lignes

Vous pouvez souvent améliorer la disposition de vos grilles Bootstrap en faisant en sorte que certaines colonnes s'étendent sur plusieurs lignes. Cette technique peut être particulièrement utile pour créer des grilles visuellement attrayantes avec des hauteurs de contenu variables, comme dans l'exemple fourni :

[Image d'une grille avec une seule colonne s'étendant sur deux lignes]

Bootstrap 3

Pour obtenir cet effet dans Bootstrap 3, vous pouvez utiliser des lignes et des colonnes imbriquées. Voici comment :

<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>
<div class="row">
    <div class="col-md-4">
        <div class="well">6</div>
    </div>
    <div class="col-md-4">
        <div class="well">7</div>
    </div>
    <div class="col-md-4">
        <div class="well">8</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!