如何在 Bootstrap 5 中实现卡片（Card）整体可点击？

Bootstrap 5 官方推荐的解决方案是使用 stretched-link 工具类。它通过绝对定位 + 全尺寸覆盖的方式，使链接“视觉上拉伸”至父容器边界，同时保持 dom 结构纯净、语义正确、无障碍友好（支持键盘聚焦与 Enter 键触发）。

✅ 正确用法：在卡片内部添加 stretched-link

将 放置在 .card 内部任意位置（通常置于末尾），添加 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>

? 原理说明：stretched-link 依赖于父容器（即 .card）具有 position: relative（Bootstrap 卡片默认已满足）。该类会为 设置 position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;，使其完全覆盖卡片内容区，且不干扰原有布局流。

⚠️ 注意事项

• 父容器必须有 position: relative：Bootstrap 5 的 .card 默认已声明 position: relative，无需额外添加；若自定义卡片样式覆盖了该属性，请手动补回。
• 避免重复链接或冗余 href：确保每个卡片仅含一个 stretched-link，且 href 值有效（如 /about.html、#section1 或 JavaScript 跳转 javascript:void(0)）。
• 无障碍增强建议：
  • 为链接添加 aria-label（尤其当卡片无可见文字链接时）：

    <a href="/about.html" class="stretched-link" aria-label="Learn more about CCTV Services"></a>

  • 若卡片本身已有标题链接（如
    

    CCTV Services

    ），请保留其语义，stretched-link 作为补充点击区域，二者不冲突。

• 不要用 nav-link 替代：问题代码中 是空链接，且 nav-link 无拉伸行为，也不会生效。

? 效果验证技巧

• 鼠标悬停时检查是否显示手型光标（cursor: pointer）；
• 使用浏览器开发者工具 → “元素”面板，确认 的 computed styles 中 position: absolute 及四边偏移值均为 0；
• 尝试键盘 Tab 导航：焦点应能落到该链接上，按 Enter 即可跳转。

✅ 总结

stretched-link 是 Bootstrap 5 针对“容器级点击”场景设计的轻量、健壮、标准化方案。它规避了包裹式写法的语义缺陷，兼顾可访问性与开发效率。对于初学者而言，牢记「链接放内部、加 stretched-link、父容器需相对定位」三要素，即可零成本实现专业级卡片交互体验。