css - Bootstrap 4 网格马赛克

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

一种方法是使用包含的显示和 float 实用程序覆盖 Bootstrap 4 flexbox..

<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