如何在屏幕小于800px时为Carousel Item添加a标签包裹？

可以完全不依赖JavaScript实现需求，通过CSS媒体查询+Bootstrap定位类调整点击区域的显示范围即可，具体实现步骤如下：

1. 修改HTML结构 #

在carousel-item内部添加一个空的<a>标签，同时给carousel-item加上position-relative类（作为内部绝对定位元素的参考容器）：

<div class="carousel-item position-relative">
  <!-- 小屏专用跳转链接 -->
  <a href="你的目标跳转地址" class="carousel-link d-none position-absolute top-0 start-0 w-100 h-100 z-10"></a>
  
  <img src="https://www.tutorialrepublic.com/lib/images/bootstrap-5.0-illustration.png" class="d-block w-100" alt="轮播图">
  
  <div class="carousel-caption d-none d-md-block">
    <h5>First slide label</h5>
    <p>Some representative placeholder content for the first slide.</p>
  </div>
</div>

2. 添加自定义CSS媒体查询 #

针对屏幕宽度小于800px的场景，显示跳转链接并让它覆盖整个轮播项：

/* 屏幕宽度<800px时生效 */
@media (max-width: 799px) {
  .carousel-link {
    display: block !important;
  }
}

实现逻辑 #

• 大屏（≥800px）：carousel-link被d-none类隐藏，carousel-caption正常显示，轮播项无跳转触发区域，保留原有交互。
• 小屏（<800px）：媒体查询触发显示carousel-link，通过绝对定位让它铺满整个carousel-item，z-10确保它在图片上方（不遮挡视觉但能接收点击），同时carousel-caption因Bootstrap的响应式类自动隐藏，用户点击轮播图任意位置即可触发跳转。

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