Bootstrap carousel点击上下切换按钮无法切换轮播项求助

根因 #

核心错误是轮播控制按钮的DOM嵌套层级不符合组件规则：

• 上一页、下一页两个<a>控制标签被错误嵌套在<div class="carousel-inner">容器内部
• Bootstrap Carousel内部使用直接子元素选择器匹配控制按钮，仅会绑定轮播根容器下一级的控制元素事件，嵌套在carousel-inner内部的按钮无法被组件识别，因此点击无响应，轮播始终停留在第一项。

问题效果参考 #

修复方案 #

将两个控制按钮的代码整体移动到carousel-inner容器的闭合标签外侧，使其作为轮播根容器<div id="featured-products-carousel" class="carousel slide">的直接子元素即可。
修复后的正确核心结构代码：

<div id="featured-products-carousel" class="carousel slide" data-ride="carousel">
  
  <ol class="carousel-indicators">
    <li data-target="#featured-products-carousel" data-slide-to="0" class="active"></li>
    <li data-target="#featured-products-carousel" data-slide-to="1"></li>
    <li data-target="#featured-products-carousel" data-slide-to="2"></li>
  </ol>
  
  <div class="carousel-inner">
    <div class="carousel-item active image-container">
      <div class="carousel-placeholder"></div>
      <div class="container">
        <div class="carousel-caption text-left">
          <h2>Product 1.</h2>
          <p>Your product description here.</p>
          <p>
            <a class="btn btn-lg btn-primary" href="#service-1" role="button">
              Learn more..
            </a>
          </p> 
        </div>
      </div> 
    </div>
    
    <div class="carousel-item">
      <div class="carousel-placeholder"></div>
      <div class="container">
        <div class="carousel-caption">
          <h2>Product 2.</h2>
          <p>Your product description here.</p>
          <p>
            <a class="btn btn-lg btn-primary" href="#service-2" role="button">
              learn more..
            </a>
          </p>
        </div>
      </div>
    </div>
    
    <div class="carousel-item">
      <div class="carousel-placeholder"></div>
      <div class="container">
        <div class="carousel-caption text-right">
          <h2>Product 3.</h2>
          <p>Your product description here.</p>
          <p>
            <a class="btn btn-lg btn-primary" href="#service-3" role="button">
              Learn more..
            </a>
          </p>
        </div>  
      </div>
    </div>
    <!-- carousel-inner 在此处闭合，控制按钮不要放在这个标签内部 -->
  </div> 

  <!-- 控制按钮放在carousel-inner外侧，作为轮播根容器的直接子元素 -->
  <a class="carousel-control-prev" href="#featured-products-carousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#featured-products-carousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  
</div>

补充校验 #

如果调整层级后功能仍异常，可逐一检查：

• 页面已按依赖顺序引入jQuery、Bootstrap CSS、Bootstrap JS文件，无资源加载404错误
• 页面没有其他自定义全局JS代码拦截了a标签的默认点击行为

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