Bootstrap实现点击缩略图时在展开图下方显示alt文本

功能未生效的核心原因有3个：

• 页面中不存在id="imgtext"的DOM节点，JS获取该元素时会返回空值，无法写入alt文本
• 写入alt内容的逻辑代码被注释，没有实际执行
• 大图容器默认是flex横向布局，就算加了文本也会和大图并排显示，不会出现在图片下方

具体修正代码 #

1. 修正JS逻辑 #

取消赋值代码的注释即可：

function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  // 写入alt文本到对应容器
  imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";
}

2. 修正HTML结构 #

给大图容器加上纵向flex布局，在大图下方添加id为imgtext的文本容器：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!--START Sidebar -->
<div class="row my-row">
  <div class="col-md-3 ">
    <!--Thumbnail START-->
    <div class="thumbnailContainer">
      <img src="https://ursd.org/wp-content/uploads/2020/12/1.png" alt="TEXT FOR IMAGE" class="img-thumbnail border-0 img-thumbnail-desktop" style="max-width:140px;" onclick="myFunction(this);">
    </div>
    <!--Thumbnail END-->
  </div>

  <div class="col-md-9 ">
    <!--main content  添加flex-column实现纵向排列，align-items-center实现内容居中-->
    <div class="container expandedImgSize d-flex flex-column align-items-center">
      <span onclick="this.parentElement.style.display='none'" class="close-btn">&times;</span>
      <img class="img-fluid" id="expandedImg" src="PLACEHOLDER IMG">
      <!-- 文本容器，添加Bootstrap间距类调整和图片的距离 -->
      <div id="imgtext" class="mt-3 text-center text-muted"></div>
    </div>
  </div>
</div>

3. 可选补充CSS #

优化关闭按钮和缩略图容器的展示效果：

.expandedImg .img {
  max-width: 150px;
}

.thumbnailContainer {
  overflow-y: auto;
  width: 180px;
  height: 40vh;
}

.close-btn {
  align-self: flex-end;
  font-size: 2rem;
  cursor: pointer;
  padding: 0 1rem;
}

修正后点击缩略图时，对应alt文本就会自动显示在大图正下方。

内容的提问来源于stack exchange，提问作者asar13