ホームページ >ウェブフロントエンド >CSSチュートリアル >ブートストラップで複数行の列を作成するにはどうすればよいですか?
複数行のブートストラップ列の作成
多くの場合、特定の列を複数の行にまたがらせることで、ブートストラップ グリッドのレイアウトを拡張できます。この手法は、次の例のように、さまざまなコンテンツの高さを持つ視覚的に魅力的なグリッドを作成する場合に特に役立ちます:
[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 サイトの他の関連記事を参照してください。