stretched-link 在 bootstrap 5 中需满足父容器有 position: relative 且子元素为带 .stretched-link 的 或
Stretched-link 在 Bootstrap 5 中的生效条件
它不是独立组件，而是靠 CSS 实现的“点击区域扩展”，必须满足两个前提才能工作：
— 父容器需有 position: relative（Bootstrap 5 的 .card 默认已设）
— 子元素中必须有一个 <a></a> 或 <button></button>，且该元素要加 .stretched-link 类
常见失效原因：父容器被覆盖了定位（比如加了 position: static）、链接被包裹在额外的 <div> 里、或用了 <code><router-link></router-link>（Vue）等非原生标签却没正确透传属性
卡片内多个可点击区域怎么处理
一个卡片只能有一个 .stretched-link 生效，否则会相互覆盖或行为错乱。如果你需要「标题点跳转 + 按钮点操作」，别给按钮也加 .stretched-link，而是：
— 标题用 <a href="..." class="stretched-link"></a>
— 按钮保持原样，用 z-index 确保它在最上层（Bootstrap 5 默认 .btn 的 z-index 是 auto，可显式设为 1）
— 避免把按钮放在 <a></a> 内部，HTML 规范禁止交互元素嵌套
为什么点击空白处没反应？检查这三处
典型现象：卡片看起来能点，但鼠标移上去没手型，点击无跳转。
— 确认 <a></a> 的 href 属性存在且非空（href="#" 会跳顶，href="" 在某些浏览器下无效）
— 查看 computed styles，确认父卡片没有 overflow: hidden（它会裁掉 .stretched-link 的伪元素）
— 如果卡片用了 .card-body + .card-footer 分块，确保 .stretched-link 所在的 <a></a> 是直接子元素，而不是只包住了某一块内容
Vue / React 项目里怎么安全用
框架中容易忽略 DOM 结构是否符合预期。
— Vue：不要对 <router-link></router-link> 直接加 .stretched-link，它渲染出来不是原生 <a></a>；应在外层套一层 <a></a>，或用 to + @click 手动触发导航
— React：同理，避免 <link> 套 .stretched-link；可用 <a href="%7Bto%7D" classname="stretched-link"></a> + onClick={(e) => { e.preventDefault(); navigate(to); }}
— 所有情况都要确保最终 HTML 输出里，那个带 .stretched-link 的标签是 <a></a> 或 <button></button>，且父级有 position: relative
最容易被忽略的是 overflow: hidden 和框架对 <a></a> 的封装——它不报错，但就是不响应点击。调试时直接看浏览器里渲染出的实际 <a></a> 元素和它的父容器 computed styles，比查文档更快。
