<a> 标签中的 class="thumbnail" 在 bootstrap 4 中不起作用

Posted 2023-03-29

【中文标题】<a> 标签中的 class="thumbnail" 在 bootstrap 4 中不起作用

【英文标题】：class="thumbnail" in <a> tag not working in bootstrap 4

【发布时间】：2021-01-21 14:50:31

【问题描述】：

我在 youtube 上观看了引导教程 video。导师正在使用引导程序 3（我正在使用引导程序 4），当我像他一样使用 .thumbnail 类时，我的锚标记未呈现为缩略图。有没有其他方法可以像他一样将锚标记内的内容呈现为缩略图？

<div class="col-lg-3 col-md-4 col-sm-6">
        <a href="img/butterfly.jpg" class="thumbnail">
          <p>ButterFly</p>
          <img src="img/butterfly.jpg" />
        </a>
      </div>

【问题讨论】：

a 标签在 v4.x 中完全删除了缩略图，并被 card 组件 (getbootstrap.com/docs/4.5/migration/…) 替换 - 如果您想使用视频中的缩略图，您需要使用 v3 .x

【参考方案1】：

v4.x 中完全删除了锚点 (a) 标记的缩略图，并替换为 card 组件 (https://getbootstrap.com/docs/4.5/migration/#panels-thumbnails-and-wells) - 如果您想像视频中一样使用 thumbnails，则需要使用v3.x

或者，您可以使用图像缩略图，例如：

<img src="..." alt="..." class="img-thumbnail">

参见文档：https://getbootstrap.com/docs/4.5/content/images/#image-thumbnails