Bootstrap 4中的缩略图库

Frank 发表于 Dev

坦率

我想知道如何在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时，顶部的两个较小的缩略图和底部的两个缩略图之间的空间太大。当我在前两个较小的缩略图之后添加换行符时，也会发生同样的事情。

谢谢，

齐姆

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

一种“解决方法”是禁用flexboxmd并改用floats ...

<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

注意：-xsBootstrap 4中不再包含

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。