bootstrap导航栏点击后蓝色边框源于浏览器对:focus状态的可访问性默认样式，由outline与box-shadow双重渲染构成；需同时清除二者，推荐用.nav-link:focus:not(:focus-visible){outline:none;box-shadow:none}兼顾无障碍。
Bootstrap导航栏点击后蓝色边框的来源
导航栏里带 nav-link 的链接（<a></a>）或按钮（<button></button>）点击后出现的蓝色边框，和按钮一样，不是 bug，而是浏览器对 :focus 状态的默认可访问性反馈。Bootstrap 5+ 没有重写它，所以直接沿用了原生行为：Chrome/Firefox 显示系统色 outline，部分主题下还会叠加 box-shadow。
.nav-link:focus 必须同时清 outline 和 box-shadow
只写 outline: none 无效——因为现代浏览器（尤其 Chrome）的焦点环是 outline + box-shadow 双重渲染；只清一个，另一个仍会显示蓝边。
-
.nav-link:focus是最核心的选择器，必须覆盖 - 如果导航项用了
dropdown-toggle或 JS 激活状态，还要加.nav-link.active:focus和.nav-link:focus-visible - 不要漏掉
.dropdown-item:focus—— 下拉菜单里的条目同样会亮边 - 确保你的 CSS 文件加载在 Bootstrap CSS 之后，否则规则不生效
推荐写法（放于自定义 CSS 末尾）：
.nav-link:focus,
.nav-link.active:focus,
.dropdown-item:focus {
outline: none;
box-shadow: none;
}
为什么 .nav-link:focus-visible 更安全
用 :focus-visible 能区分用户操作方式：键盘 tab 导航时保留蓝边，鼠标点击后自动隐藏。这对可访问性更友好，且避免“点一下就闪一下”的干扰。
- Safari 15.4+、Chrome 86+、Firefox 89+ 原生支持
:focus-visible - 旧版浏览器会 fallback 到
:focus，所以建议组合写：.nav-link:focus:not(:focus-visible)配合outline: none - 单独只写
.nav-link:focus-visible在 Safari 15.3 及更早版本里完全不生效
稳妥方案：
.nav-link:focus:not(:focus-visible),
.nav-link:active:focus {
outline: none;
box-shadow: none;
}
别忘了下拉菜单和移动端触控残留
导航栏常配合 dropdown 使用，而 .dropdown-menu 内部的 .dropdown-item、.dropdown-toggle 同样会触发焦点样式。另外，在 iOS/Safari 上点击后焦点可能滞留，导致蓝边不消失。
- 所有可聚焦子元素都要覆盖：
.dropdown-item:focus、.dropdown-toggle:focus - 若需彻底防止焦点滞留，可在 JS 中对
nav-link绑定click后调用blur()，但仅限确认无键盘用户场景 - 移动端测试务必真机验证：模拟器常不触发真实的
:focus行为
容易被忽略的是：移除所有焦点样式后，键盘用户将无法判断当前高亮项在哪。如果你没提供替代视觉反馈（比如背景色变化、下划线、图标位移），就等于关闭了可访问性入口。
