Bootstrap 5 提供了原生、语义化且无障碍友好的 stretched-link 工具类，只需在卡片内部添加一个带目标链接的 标签并应用该类，即可让整个卡片区域响应点击事件，无需包裹卡片或破坏 HTML 结构。
bootstrap 5 提供了原生、语义化且无障碍友好的 `stretched-link` 工具类，只需在卡片内部添加一个带目标链接的 `` 标签并应用该类，即可让整个卡片区域响应点击事件，无需包裹卡片或破坏 html 结构。
在 Bootstrap 开发中，常需将整张卡片（Card）设为可点击区域以跳转至详情页——但若直接用 标签包裹 Bootstrap 5 官方推荐的解决方案是使用 stretched-link 工具类。它通过绝对定位 + 全尺寸覆盖的方式，使链接“视觉上拉伸”至父容器边界，同时保持 DOM 结构纯净、语义正确、无障碍友好（支持键盘聚焦与 Enter 键触发）。 将 放置在 .card 内部任意位置（通常置于末尾），添加 stretched-link 类即可： ? 原理说明：stretched-link 依赖于父容器（即 .card）具有 position: relative（Bootstrap 卡片默认已满足）。该类会为 设置 position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;，使其完全覆盖卡片内容区，且不干扰原有布局流。 stretched-link 是 Bootstrap 5 针对“容器级点击”场景设计的轻量、健壮、标准化方案。它规避了包裹式写法的语义缺陷，兼顾可访问性与开发效率。对于初学者而言，牢记「链接放内部、加 stretched-link、父容器需相对定位」三要素，即可零成本实现专业级卡片交互体验。✅ 正确用法：在卡片内部添加 stretched-link
<div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2 crd">
<i class="fa-solid fa-camera-cctv fa-3x"></i>
<h4>CCTV Services</h4>
<p class="p-2">
<b>CCTV Services</b> are an essential component of any businesshttps://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c
</p>
<!-- 关键：添加 stretched-link -->
<a href="/about.html" class="stretched-link"></a>
</div>
</div>⚠️ 注意事项
<a href="/about.html" class="stretched-link" aria-label="Learn more about CCTV Services"></a>
CCTV Services
），请保留其语义，stretched-link 作为补充点击区域，二者不冲突。? 效果验证技巧
✅ 总结
