Maison >interface Web >tutoriel CSS >Comment puis-je créer des colonnes à plusieurs lignes avec Bootstrap ?

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

DDD
DDDoriginal
2024-12-13 10:59:25870parcourir

How Can I Create Multi-Row Columns with 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!

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