必须用 stretched-link 实现 Card 整体可点击：在 .card 内末尾添加空 <a> 并设 href 和 stretched-link 类，依赖父容器 position: relative（.card 默认已满足），不可直接用 <a> 包裹整个卡片。
Card 整体可点击必须用 stretched-link，别套 <a> 标签
直接用 <a> 包裹整个 .card 元素看似简单，但会破坏 HTML 语义（<a> 是内联元素，不能合法包裹块级结构），导致屏幕阅读器误读、焦点管理混乱，且 Bootstrap 的 .card-img-top 和 .card-body 内部流式计算可能失效。真正合规的做法是：在 .card 内部末尾插入一个空的 <a>，添加 stretched-link 类，并设 href。
-
stretched-link依赖父容器有position: relative—— Bootstrap 5 的.card默认已声明，无需额外加 - 链接必须放在
.card最内层末尾（即所有内容之后、</div>之前），否则会被其他子元素遮挡 - 若卡片含按钮或交互元素（如
.btn），它们仍保持独立可点击，stretched-link不会拦截其事件 - 为无障碍考虑，建议给该
<a>添加aria-label，尤其当卡片标题不明显时（例如仅含图标）
stretched-link 的样式行为和常见失效原因
这个类本质是通过 position: absolute + inset: 0 实现全区域覆盖，它本身不占布局空间，也不影响文字渲染。但一旦失效，通常是因为：
- 父容器不是
position: relative（自定义卡片外壳未继承.card类时容易出错） - 卡片内部用了
overflow: hidden且未配position: relative，导致绝对定位链接被裁剪 - 卡片内存在
z-index显式设置的子元素（如带z-index: 1的.card-header），把链接压在了下面 - 使用了第三方 CSS 框架或重置样式，意外覆盖了
stretched-link的inset或pointer-events
替代方案对比：CSS :hover + JS click vs stretched-link
有人尝试用纯 CSS 模拟“整卡可点”：给 .card 加 cursor: pointer 和 :hover 样式，再用 JS 绑定 click 事件跳转。这在功能上可行，但问题不少：
- 无法被键盘
Enter/Space触发，损害可访问性 - 不支持右键“在新标签页打开”，丧失浏览器原生能力
- SEO 友好度低：搜索引擎无法识别该区域是导航入口
- 移动端 touch 事件响应不如原生
<a>稳定（尤其在快速滑动后误触发） -
stretched-link是 Bootstrap 官方支持方案，兼容性明确（v5.2+），无需维护额外逻辑
卡片跳转时的 UX 细节容易被忽略
即使 stretched-link 正常工作，实际交付中仍有几个隐形坑：
- 卡片若含
<button>或<a>子链接，它们的z-index必须高于stretched-link（默认是 auto），否则点击按钮会触发整卡跳转 - 使用
target="_blank"时，务必加rel="noopener"，否则存在安全风险 - 卡片作为列表项（如博客摘要）时，整卡跳转会让用户失去“复制标题”“打开图片”等右键操作——需权衡是否真需要 100% 覆盖
- 暗色模式下，
stretched-link的透明覆盖层不影响主题切换，但若手动加了background或opacity，就可能干扰--bs-card-bg变量生效
