Bootstrap 4 中的缩略图库答案

【问题标题】：Thumbnail gallery in Bootstrap 4Bootstrap 4 中的缩略图库
【发布时间】：2018-12-10 20:43:11
【问题描述】：

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

我有来自此模板 (https://startbootstrap.com/template-overviews/thumbnail-gallery/) 的以下代码：

<div class="col-lg-6 col-md-4 col-xs-6">
<a href=“link” class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src=“image1.jpg" alt="">
      </a>

<div class="col-lg-3 col-md-4 col-xs-6">
<a href=“link” class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src=“image2.jpg" alt="">
      </a>
</div>

<div class="col-lg-3 col-md-4 col-xs-6">
<a href=“link” class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src=“image3.jpg" alt="">
</a>
</div>

<div class="col-lg-3 col-md-4 col-xs-6">
<a href=“link” class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src=“image4.jpg" alt="">
</a>
</div>

<div class="col-lg-3 col-md-4 col-xs-6">
<a href=“link” class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src=“image5.jpg" alt="">
</a>
</div>

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

谢谢，

【问题讨论】：

标签： twitter-bootstrap bootstrap-4

【解决方案1】：

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

一种“解决方法”是禁用 md 上的弹性框并改用浮点数...

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

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

或者，只需制作 2 个单独的列，1 个用于大图像，1 个用于嵌套的 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>

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

注意：Bootstrap 4 中不再有 -xs

【讨论】：