Bootstrap 4 Grid mosaic

Question

我用Bootstrap 3構建了一個小的鑲嵌圖，如下所示：Working mosaic。 我現在有一個網站在bootstrap 4下，當我想重複使用我的鑲嵌圖案時，我得到這個：Broken mosaic。

這裏是我的html

<div class="container"> 
    <div class="row"> 
     <div class="col-md-8 col-lg-6 B"></div> 
     <div class="col-md-4 col-lg-3 G"></div> 
     <div class="col-md-4 col-lg-3 G"></div> 
     <div class="col-md-12 col-lg-6 O"></div> 
    </div> 
</div> 

而且我的CSS

.row > div {border:10px solid white} 
.B {background:blue; height:200px} 
.G {background:green; height:100px} 
.O {background:orange; height:100px} 

有誰知道版本3和4之間發生了什麼事？你有沒有使用js修復？

坦克一百萬！

Answer 1

一種方法是使用附帶的顯示器覆蓋引導4 Flexbox的，浮utils的..

<div class="container"> 
    <div class="row d-block"> 
     <div class="col-md-8 col-lg-6 float-left B"></div> 
     <div class="col-md-4 col-lg-3 float-left G"></div> 
     <div class="col-md-4 col-lg-3 float-left G"></div> 
     <div class="col-md-12 col-lg-6 float-left O"></div> 
    </div> 
</div> 

https://www.codeply.com/go/gAaNjAHjVh