ホームページ >ウェブフロントエンド >CSSチュートリアル >ブートストラップで複数行の列を作成するにはどうすればよいですか?

ブートストラップで複数行の列を作成するにはどうすればよいですか?

DDD
DDDオリジナル
2024-12-13 10:59:25875ブラウズ

How Can I Create Multi-Row Columns with Bootstrap?

複数行のブートストラップ列の作成

多くの場合、特定の列を複数の行にまたがらせることで、ブートストラップ グリッドのレイアウトを拡張できます。この手法は、次の例のように、さまざまなコンテンツの高さを持つ視覚的に魅力的なグリッドを作成する場合に特に役立ちます:

[2 行にまたがる 1 つの列を持つグリッドの画像]

Bootstrap 3

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

以上がブートストラップで複数行の列を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。