Twitter bootstrap 引导4中的缩略图库

我想知道如何在引导4中在lg中创建以下缩略图布局：

我从这个模板（）中获得了以下代码：

我遇到的问题是最后2个div出现在较大的div下，这是有意义的，因为12列网格系统。当我在当前的lg-6 div下放置另一个lg-6 div时，顶部两个较小的缩略图和底部两个缩略图之间的空间过大。在前两个较小的缩略图之后添加换行符时也会发生同样的情况

---

谢谢，

StartBootstrap示例仅用于显示大小相同的图像。现在Bootstrap 4是flexbox，行的高度将相同，因此不均匀网格场景中的最后2个图像将被包装到下一行

一个“解决方法”是禁用

md

上的flexbox，并改用浮动

<div class="container py-4">
    <div class="row d-md-block">
        <div class="col-md-6 float-md-left">
            <a href="link" class="d-block h-100">
                <img class="img-fluid" src="//placehold.it/600" alt="">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-6 pb-1 float-md-left">
            ..
        </div>
        <div class="col-lg-3 col-md-4 col-6 pb-1 float-md-left">
            ...
        </div>
        <div class="col-lg-3 col-md-4 col-6 pb-1 float-md-left">
            ..
        </div>
        <div class="col-lg-3 col-md-4 col-6 pb-1 float-md-left">
            ..
        </div>
    </div>
</div>

..
...
..
..

或，只需创建两个单独的列，一个用于大图像，一个用于嵌套的4x4网格

<div class="container py-4">
    <div class="row">
        <div class="col-md-6">
            <a href="“link”" class="d-block h-100 mb-4">
                <img class="img-fluid" src="//placehold.it/600" alt="">
            </a>
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-6">
                    ..
                </div>
                <div class="col-6">
                    ..
                </div>
                <div class="col-6">
                    ..
                </div>
                <div class="col-6">
                    ..
                </div>
            </div>
        </div>
    </div>
</div>

..
..
..
..

注意：引导程序4中不再有

-xs

<div class="container py-4">
    <div class="row">
        <div class="col-md-6">
            <a href="“link”" class="d-block h-100 mb-4">
                <img class="img-fluid" src="//placehold.it/600" alt="">
            </a>
        </div>
        <div class="col-md-6">
            <div class="row">
                <div class="col-6">
                    ..
                </div>
                <div class="col-6">
                    ..
                </div>
                <div class="col-6">
                    ..
                </div>
                <div class="col-6">
                    ..
                </div>
            </div>
        </div>
    </div>
</div>