如何在Bootstrap 4中創建奇怪的外觀網格？

Question

如何在Bootstrap 4中創建奇怪的網格？例如，

最左邊的列橫跨兩行，並在它的右邊兩排各有3個colums

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

Answer 1

當使用引導程序的網格，你應該想想列，而不是佈局的佈局行。列的佈局取決於單元內部內容的高度。

爲了證明一行跨越兩列，我有固定的行的高度

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