Bootstrap5轮播图添加跳转链接报404及点击无响应问题求助

问题原因&解决方案 #

• 引号格式错误
  HTML属性要求使用英文半角引号"，你的代码里误用了中文全角引号“，同时缺少属性值的右引号，浏览器会把中文引号识别为URL的一部分，你报错路径中的%E2%80%9C就是中文左引号的URL编码，自然无法匹配到同目录下的目标文件。
• a标签未正确闭合
  你原始代码中的a标签缺少闭合标记，会导致浏览器解析DOM结构异常，出现点击无响应、样式错乱的问题。
• 链接样式异常
  浏览器给a标签设置了默认蓝色样式，覆盖了轮播标题原本的白色，添加简单样式即可恢复原有显示效果。

你提到的data-bs-target是Bootstrap轮播组件用来绑定控制按钮和轮播容器的属性，和你的链接跳转问题无关，无需修改相关配置。

修正后的代码片段 #

<!-- Carousel of Projects -->
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="Images/palmLighthouse1.jpg" class="d-block w-100" alt="Key West Lighthouse">
      <div class="carousel-caption d-none d-md-block">
        <h5 class="display-2"><a href="KeyWestPhotoGallery.html" style="color:#fff;text-decoration:none;">Key West Photo Gallery</a></h5>
        <!-- <p>Some representative placeholder content for the first slide.</p> -->
      </div>
    </div>
    <!-- 剩余轮播项代码保持原有逻辑即可 -->
  </div>
</div>

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