
bootstrap 5 默认为所有 `` 标签添加了 `text-decoration: underline`,导致链接自动带下划线;可通过添加 `text-decoration-none` 工具类或自定义 css 轻松禁用。
在 Bootstrap 5 中,链接( 元素)默认启用了下划线装饰(text-decoration: underline),这是与 Bootstrap 4 的一个重要变化——此前版本中仅在悬停时显示下划线,而 v5 默认始终显示。这一改动虽提升可访问性,但可能破坏原有设计风格。
✅ 推荐解决方案:使用 Bootstrap 内置工具类
为单个链接移除下划线,直接添加 text-decoration-none 类:
无下划线链接
若需全局禁用(例如项目中所有链接均不加下划线),可在自定义 CSS 中覆盖默认样式(建议放在 Bootstrap 引入之后):
a {
text-decoration: none !important;
}
/* 可选:恢复悬停下划线(保持交互提示) */
a:hover {
text-decoration: underline !important;
}⚠️ 注意事项:
- 避免滥用 !important;优先通过更具体的选择器(如 .nav-link, .btn-link)精准控制;
- 从可访问性角度出发,建议至少保留悬停/聚焦状态的视觉反馈(如 text-decoration: underline 或 border-bottom);
- 若使用 Sass 版本 Bootstrap,也可在 _variables.scss 中修改 $link-decoration 变量值,实现源头定制。
总结:text-decoration-none 是最轻量、语义清晰且响应式的解决方式,既符合 Bootstrap 5 的工具类设计理念,也便于团队协作与维护。










