Question

我用Bootstrap 3构建了一个小马赛克，如下所示：Working mosaic。我现在在bootstrap 4下有一个站点，当我想重用我的马赛克时，我得到了这个：Broken mosaic。

这是我的HTML

$collection->nth($nth)

我的css

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

有谁知道版本3和版本4之间发生了什么？你有没有使用js修复？

坦克一百万！

Answer 1

一种方法是使用附带的display和float utils覆盖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

Bootstrap 4网格马赛克

1 个答案: