bootstrap 5 默认为所有 `` 标签添加了 `text-decoration: underline`，导致页面中所有链接自动带下划线；可通过内置工具类 `text-decoration-none` 快速禁用，或使用 css 覆盖全局样式。
在 Bootstrap 5 中，链接（<a> 标签）默认启用了下划线装饰（text-decoration: underline），这是与 Bootstrap 4 的一个重要视觉差异——Bootstrap 4 默认无下划线，而 Bootstrap 5 为提升可访问性与语义明确性，默认为所有 <a> 元素添加了下划线（除非其 href 属性缺失或为空）。这一改动虽符合 WCAG 推荐实践，但在已有项目中可能造成样式突变，尤其当设计师依赖“无下划线链接”作为按钮或导航项时。
✅ 推荐解决方案
1. 使用 Bootstrap 内置工具类（推荐，局部控制）
为单个链接添加 text-decoration-none 类即可移除下划线：
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="text-decoration-none">这是一个无下划线链接</a>
该类对应 CSS 规则为：
.text-decoration-none { text-decoration: none !important; }✅ 优势：无需自定义 CSS，语义清晰，支持响应式变体（如 text-decoration-none text-decoration-underline-hover 配合悬停效果）。
2. 全局重置（谨慎使用）
若需全站统一取消链接下划线（不推荐盲目覆盖），可在自定义 CSS 文件中 置于 Bootstrap 之后 添加：
a {
text-decoration: none;
}
/* 可选：仅对非外部链接移除 */
a:not([href^="http"]):not([href^="mailto:"]) {
text-decoration: none;
}⚠️ 注意：此方式会削弱链接的可识别性，建议配合 color 和 hover 状态优化交互反馈（例如改变颜色或添加边框）。
3. 按场景精细化控制
- 导航栏链接：在 .navbar-nav .nav-link 上统一添加 text-decoration-none
- 卡片/按钮式链接：直接使用 btn btn-link text-decoration-none
- 悬停恢复下划线：组合使用 text-decoration-none text-decoration-underline-hover
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="text-decoration-none text-decoration-underline-hover"> 悬停时显示下划线 </a>
? 总结
Bootstrap 5 的链接下划线是主动设计选择，而非 Bug。优先使用 text-decoration-none 工具类进行精准控制，避免全局重置破坏可访问性。同时建议结合 :focus-visible 或 :hover 提供足够的视觉反馈，确保键盘用户与鼠标用户均能清晰识别可点击元素。
