ブートストラップ4で奇妙に見えるグリッドを作成するにはどうすればよいですか？

Question

ブートストラップ4で奇妙に見えるグリッドを作成するにはどうすればよいですか？例えば、

左端の列には、2行にまたがると、その右に2行には、それぞれ3つのcolums

を持つ

|||||||||||||||| 
|  | | | | 
|  |_ |_ |_ | 
|  | | | | 
|_____|_ |_ |_ | 

Answer 1

ブートストラップのグリッドを使用する場合は、あなたが代わりのレイアウトの列のレイアウトを考える必要があります行。列のレイアウトは、セル内のコンテンツの高さに依存します。

2つの列をまたがる行を実証するために、私は、行の高さを固定している

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col col-md-6"> 
     <div style="height: 400px; background-color: rgb(26, 188, 156);"></div> 
     </div> 
     <div class="col col-md-6"> 
     <div class="row"> 
      <div class="col col-md-4"> 
       <div style="height: 200px; background-color: rgb(52, 152, 219);"></div> 
      </div> 
      <div class="col col-md-4"> 
       <div style="height: 200px; background-color: rgb(231, 76, 60);"></div> 
      </div> 
      <div class="col col-md-4"> 
       <div style="height: 200px; background-color: rgb(52, 73, 94);"></div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col col-md-4"> 
       <div style="height: 200px; background-color: rgb(22, 160, 133);"></div> 
      </div> 
      <div class="col col-md-4"> 
       <div style="height: 200px; background-color: rgb(230, 126, 34);"></div> 
      </div> 
      <div class="col col-md-4"> 
       <div style="height: 200px; background-color: rgb(149, 165, 166);"></div> 
      </div> 
     </div> 
     </div> 
    </div> 
</div>