Question

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

谢谢

Answer 1

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

一种“解决方法”是禁用md上的flexbox，而改用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

或者， 只需简单地创建两列，一列用于大图，一列用于嵌套的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

Bootstrap 4中的缩略图库

1 个答案: