bootstrap レイアウト実装について（グリッドシステム）

Question

前提・実現したいこと

bootstarapで下記画像のようなレイアウト構成を実装する方法が分かりません。
具体的には、10~12のピンクブロックの実装方法が分かりません。

試したこと

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>  

上記のような、一般的なcontainerとrowを用いて実装することは可能なのでしょうか？
それとも、そもそもの考え方が違うのでしょうか？

Answer 1

おそらくこのレイアウトに最も近いのはこうじゃないでしょうか？

<div class="container">
<div class="row">
  <div class="col-lg-9">
 	 <div class="row">
	 	 <div class="col-lg-6">黄色</div>
	 	 <div class="col-lg-6">紫</div>
	  </div>
	  <div class="row">
	 	 <div class="col-lg-8">黄緑</div>
	 	 <div class="col-lg-4">青緑</div>
	  </div>
	</div>
<div class="col-lg-3">ピンクのサイドバー</div>
</div>
</div>

bootstrapのcolは親要素に対して12分割された”列”を作るので、最初に縦に割るレイアウトにcol-*クラスをつけてあげます。

この場合は1～9列までの縦の列col-lg-9と、ピンクのサイドバーの3列分col-lg-9に分けるのがいいと思います。
画面が広い時にということなのでlgをつけてあげます。

その後col-lg-9のdivの中に行であるrowを2列作ります。

この時に”親要素に対して”12分割なので

 <div class="row">
	 	 <div class="col-lg-6">黄色</div>
	 	 <div class="col-lg-6">紫</div>
	  </div>

この部分はcol-lg-9の中で12分割することになります。
したがって大親要素の4列分、5列分に分けるのは難しい(厳密にいえばできますが、bootstrapの機能だけで簡潔にするならば)ので、col-lg-6で半分ずつにするのが妥当ではないかと思います。

Comments

[kurimaron7]

回答ありがとうございます。
無事解決できました。
ありがとうございます。