Bootstrap轮播中row类下锚点按钮无法点击的问题

嘿，我来帮你搞定这个问题！你遇到的第二、第三个卡片按钮无法点击的情况，大概率是因为固定宽度的图片导致卡片超出轮播容器范围，或者元素的堆叠层级问题让点击事件被遮挡了。下面是具体的解决方法和修改后的代码：

问题根源 #

你给每张卡片的图片设置了固定宽度width:348px，但Bootstrap的col-md-4是自适应父容器宽度的。当屏幕宽度变化时，三个col-md-4的总宽度加上图片的固定宽度，很容易超出carousel-item的容器范围，导致后面的卡片部分被轮播的overflow:hidden隐藏，或者点击区域不在浏览器可识别的范围内，自然就点不动按钮了。

解决步骤 #

1. 移除图片的固定宽度，改用Bootstrap的响应式图片类或者自适应样式，让图片适配col-md-4的宽度。
2. 确保轮播容器和内部布局符合Bootstrap的栅格规范，避免元素溢出。

修改后的单轮播项代码 #

<div class="carousel-item active">
  <div class="row">
    <div class="col-md-4">
      <div class="card mb-2">
        <a href="{{rtn[0]['url']}}">
          <img class="card-img-top img-fluid" src="{{rtn[0]['urlToImage']}}" alt="Card image cap" style="height:233px; overflow:hidden; object-fit:cover;">
        </a>
        <div class="card-body">
          <h4 class="card-title" style="height:116px;">{{rtn[0]['title']}}</h4>
          <a class="btn btn-primary" href="{{rtn[0]['url']}}">Read More</a>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card mb-2">
        <a href="{{rtn[1]['url']}}">
          <img class="card-img-top img-fluid" src="{{rtn[1]['urlToImage']}}" alt="Card image cap" style="height:233px; overflow:hidden; object-fit:cover;">
        </a>
        <div class="card-body">
          <h4 class="card-title" style="height:116px;">{{rtn[1]['title']}}</h4>
          <a class="btn btn-primary" href="{{rtn[1]['url']}}">Read More</a>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card mb-2">
        <a href="{{rtn[2]['url']}}"> <!-- 补上a标签，和前两个卡片结构保持一致 -->
          <img class="card-img-top img-fluid" src="{{rtn[2]['urlToImage']}}" alt="Card image cap" style="height:233px; overflow:hidden; object-fit: cover;">
        </a>
        <div class="card-body">
          <h4 class="card-title" style="height:116px;">{{rtn[2]['title']}}</h4>
          <a class="btn btn-primary" href="{{rtn[2]['url']}}">Read More</a>
        </div>
      </div>
    </div>
  </div>
</div>

额外优化提示 #

• 使用img-fluid类是Bootstrap官方推荐的响应式图片方案，它会自动设置max-width:100%; height:auto;，完美适配栅格列的宽度。
• 如果还是存在点击问题，可以检查轮播的控制按钮（上/下一页）是否覆盖了卡片区域，或者给卡片添加position:relative; z-index:1;来提升堆叠层级。

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