应使用.disabled类配合tabindex="-1"、aria-disabled="true"及event.preventdefault()禁用导航链接，因其不支持原生disabled属性；需手动增强样式、对比度与光标行为以保障可访问性。
导航栏链接没有原生 disabled 属性，别硬套 button 的写法
Bootstrap 的 .nav-link 是 <a></a> 标签，不支持原生 disabled 属性。直接写 <a class="nav-link" disabled>首页</a> 不会触发任何禁用样式，浏览器也完全忽略该属性——这不是你 CSS 写错了，是语义根本不成立。
真正生效的只有 .disabled 类（Bootstrap 5 仍保留它用于导航链接），但必须配合手动行为控制：
- 加
tabindex="-1"阻止键盘聚焦 - 加
aria-disabled="true"告知屏幕阅读器 - 在 JS 中显式拦截点击：
event.preventDefault()
.disabled 类的颜色被 Bootstrap 默认规则压住，得用对选择器
Bootstrap 5 对导航禁用态的默认样式是：.nav-link.disabled，但它权重不高，容易被 .navbar-light .nav-link 或 .navbar-dark .nav-link 的 hover/focus 规则覆盖。
要稳定改颜色，必须匹配上下文并提高 specificity：
- 亮色主题下：
.navbar-light .nav-link.disabled { color: #6c757d !important; } - 暗色主题下：
.navbar-dark .nav-link.disabled { color: #adb5bd !important; } - 若用了自定义容器类（如
.my-navbar），优先限定范围：.my-navbar .nav-link.disabled
注意：只改 color 不够，background-color 和 border-color（如有）也得显式声明，否则可能残留悬停态的边框或背景渐变。
禁用状态不是“灰一点就行”，对比度必须达标
WCAG 要求文字与背景对比度 ≥ 4.5:1。#6c757d 在 #f8f9fa（Bootstrap 默认浅灰背景）上实测约 4.2:1，略低于标准，色弱用户或高亮度屏下易读性差。
更稳妥的取值参考：
- 亮色主题背景为
#e9ecef时，禁用文字用#495057（非#adb5bd） - 深色主题背景为
#343a40时，禁用文字建议#6c757d或稍亮的#868e96 - 避免用
rgba(0,0,0,.5)——它依赖父背景，在主题切换或嵌套容器中会失效
移动端和旧 WebView 下 .disabled 的 cursor 常不显示 not-allowed
Chrome/Firefox 桌面端对 .nav-link.disabled 的 cursor: not-allowed 支持尚可，但安卓旧版 WebView、iOS 14 以下 Safari 经常忽略该声明。
可靠兜底方案是双管齐下：
- CSS 中写：
.nav-link.disabled { pointer-events: none; cursor: not-allowed !important; } - HTML 行内补一层：
<a class="nav-link disabled" style="cursor:not-allowed">关于</a>
尤其当导航项由 Vue/React 动态渲染时，JS 设置 classList.toggle('disabled') 后，CSS 可能因渲染时机未及时应用，行内样式是最保险的 fallback。
.disabled 却没删 tabindex，用户按 Tab 还能聚焦到它，再按 Enter 却没反应——这比颜色不对更伤可访问性。
