Bootstrap Carousel添加超链接后轮播失效求助

嘿，我一眼就揪出问题所在啦——你的HTML标签没闭合完全！每个<a>标签都缺少了闭合的</a>，这会直接搞乱浏览器的DOM解析逻辑：第一张幻灯片的链接会错误地把后面所有内容都包裹进去，导致后续的幻灯片结构完全失效，自然没法正常显示、点击，轮播循环也跟着卡壳了。

修正后的完整代码 #

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
  <div class="item active">
    <a href="about.html">
      <img src="img//tshirts/large/slide1.png" alt="Slide 1">
    </a> <!-- 补上a标签的闭合标签 -->
  </div>
  <div class="item">
    <a href="tshirts.html">
      <img src="img//tshirts/large/slide2.png" alt="Slide 2">
    </a> <!-- 补上a标签的闭合标签 -->
  </div>
  <div class="item">
    <a href="sublimation.html">
      <img src="img//tshirts/large/slide3.png" alt="Slide 3">
    </a> <!-- 补上a标签的闭合标签 -->
  </div>
  <div class="item">
    <a href="sweatshirts.html">
      <img src="img//tshirts/large/slide4.png" alt="Slide 4">
    </a> <!-- 补上a标签的闭合标签 -->
  </div>
</div>

为什么这样修改就正常了？ #

HTML要求所有开启的容器标签必须正确闭合，尤其是<a>这种用来包裹内容的标签。之前的代码里第一个<a>没闭合，浏览器会自动尝试补全，但它会错误地把后面所有的.item元素都当成这个a标签的子元素，导致Bootstrap轮播组件无法识别每个独立的幻灯片项，最终出现你遇到的“只有第一张能点击、后续无内容、轮播失效”的问题。

另外，给图片加上有意义的alt文本也是个小细节，既利于无障碍访问，也能在图片加载失败时显示提示信息~

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