全局设置 a { text-decoration: none; } 易误伤按钮内链接、导航组件等，破坏可访问性；应按需使用 bootstrap 的 text-decoration-none 类或精准选择器覆盖。

直接加 a { text-decoration: none; } 是最危险的“一步到位”——它会干掉所有链接的下划线，包括按钮里的 @#@#@#@#@#@#@#@#@#@0

整组导航：<ul class="navbar-nav"><li class="nav-item">@#@#@#@#@#@#@#@#@#@1</li></ul>

配合悬停恢复（推荐）：class="text-decoration-none text-decoration-underline-hover" —— 默认无下划线，鼠标移入才显示，兼顾简洁与反馈

用在非 <a></a> 元素上也合法：<span class="text-decoration-none">纯文本</span>，Bootstrap 明确支持

必须手动覆盖的场景：组件级规则优先级太高

当你发现加了 text-decoration-none 还是有下划线，大概率是碰上了 Bootstrap 组件自己写的高权重规则，比如：

• .nav-link 在 _nav.scss 里写了 text-decoration: none !important;？不，它其实写的是 text-decoration: none;，但后面又跟了 &:hover { text-decoration: underline; } —— 所以你得同时处理 hover 状态
• .dropdown-item 默认就有 text-decoration: none;，但它可能被父级 .dropdown-menu 的字体颜色或 padding 干扰，让你误以为“还有下划线”
• 用 .btn > a 套链接时，.btn 自带 text-decoration: none;，但若你自定义了 .btn 样式，反而可能把这行覆盖掉了

此时应写更具体的选择器，例如：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

.nav-link,
.dropdown-item,
.btn > a {
  text-decoration: none;
}
.nav-link:hover,
.dropdown-item:hover {
  text-decoration: none;
}

最后提醒一个真·隐形坑：CSS 加载顺序和作用域

很多人在 Vue 单文件组件里写 <style scoped></style>，然后加 a { text-decoration: none; }，结果完全无效——因为 scoped 会给 a 加属性选择器，而 Bootstrap 的 CSS 没有，两者根本不匹配。这时候要么去掉 scoped，要么把规则写进全局样式（assets/css/app.css），且确保它在 Bootstrap CSS 之后引入。Sass 用户更简单：$link-decoration: none; 直接改变量，一劳永逸，但只影响新编译的 CSS，旧构建不会变。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！