{基本问题} 使用 Bootstrap 应用图像网格（缩略图问题）

Question

如何使用 bootstrap 创建图像网格？

这就是我尝试下一个代码时得到的结果

<div class="row">
      <div class="col">
        <div class="thumbnail">
        <img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg">
        </div>
      </div>
    </div>

我仍处于学习阶段的第一步，从 HTML CSS 和 bootstrap 开始，因为它让我们感受到了过程的成就。

我希望得到如下图所示的网格缩略图

Answer 1

像这样尝试...

<div class="row">
    <div class="col">
        <img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
    </div>
</div>

然后在添加额外的图片时，将它们也放在列中。

<div class="row">
    <div class="col">
        <img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
    </div>
    <div class="col">
        <img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
    </div>
    <div class="col">
        <img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
    </div>
</div>

如果您使用 col-* 添加这些列的宽度，它可能会更好地工作，其中 * 是 1 到 12 之间的任何数字。

<div class="row">
    <div class="col-3">
        <img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
    </div>
    <div class="col-3">
        <img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
    </div>
    <div class="col-3">
        <img src="https://scx2.b-cdn.net/gfx/news/hires/2019/2-nature.jpg" class="thumbnail">
    </div>
</div>

{基本问题} 使用 Bootstrap 应用图像网格（缩略图问题）

{Basic Question} Applying Image grid with Bootstrap ( Thumbnail Issue)

css

bootstrap-4