直接改 .navbar-nav .btn 必须补全所有伪类状态样式，否则 hover、active、disabled、focus 等状态会回退默认；推荐用 CSS 变量（如 --bs-btn-bg）在 .navbar-nav 作用域内统一重设，并注意深色模式和 .navbar-collapse.show 背景适配。
直接改 .navbar-nav .btn 会漏状态，必须补全所有伪类
导航栏里塞个 .btn（比如登录按钮），只写 .navbar-nav .btn { background-color: #0d6efd; } 是不够的。Bootstrap 的 .btn 默认依赖 CSS 变量生成各状态样式，硬覆盖背景色后，:hover、:active、:disabled 仍走原始逻辑，点一下就变回默认蓝。更麻烦的是 :focus 焦点环和 :focus-visible 可能完全失效或颜色错乱。
实操建议：
- 必须显式覆盖全部状态：
.navbar-nav .btn:hover、.navbar-nav .btn:active、.navbar-nav .btn:disabled、.navbar-nav .btn:focus - 边框和文字色要同步调：
border-color和color不能只靠继承，尤其深色背景上文字可能不可读 - 如果按钮在
.navbar-dark下，还要额外处理.navbar-dark .navbar-nav .btn分支，否则浅色文字在深背景上糊成一片
用 CSS 变量重设 --bs-btn-bg 等，但作用域要卡准
Bootstrap 5.2+ 的 .btn 内部用 --bs-btn-bg、--bs-btn-border-color、--bs-btn-color 这组变量驱动所有状态。你可以在 .navbar-nav 内局部重设它们，比手写一堆伪类更稳。
关键点是作用域不能太宽，否则影响全局按钮；也不能太窄，否则变量不继承到 .btn 子元素。
推荐写法：
.navbar-nav {
--bs-btn-bg: #dc3545;
--bs-btn-border-color: #c82333;
--bs-btn-hover-bg: #c82333;
--bs-btn-hover-border-color: #bd2130;
--bs-btn-active-bg: #bd2130;
--bs-btn-active-border-color: #b21f2d;
--bs-btn-disabled-bg: #f8d7da;
--bs-btn-disabled-border-color: #f5c6cb;
}
注意：--bs-btn-color 不在此列——它由 color-contrast() 函数动态计算，你只需确保背景够深/够浅，文字自动反色。若需强制指定，得单独加 color 声明。
.btn-outline-* 在导航栏里颜色不生效？三变量缺一不可
导航栏里放 .btn-outline-primary，改了 --bs-btn-outline-border-color 却没变色，大概率是漏了另外两个变量。.btn-outline-* 类根本不读 --bs-btn-primary-bg，它靠的是另一套独立变量：
-
--bs-btn-color：控制文字色（不是--bs-btn-outline-color） -
--bs-btn-border-color：边框色（即--bs-btn-outline-border-color） -
--bs-btn-bg：背景必须为transparent，否则边框被盖住
少设一个，整个按钮就 fallback 到 Bootstrap 默认值。例如只设了 --bs-btn-border-color: #6f42c1;，但 --bs-btn-color 没同步改，文字还是默认黑，边框紫、文字黑，对比度极低。
移动端折叠后按钮颜色错乱？检查 .navbar-collapse 容器是否透底
导航栏收起后，点击 .navbar-toggler 弹出菜单，里面的按钮颜色突然不对——常见原因是 .navbar-collapse 默认是透明背景，按钮实际渲染在父级 .navbar 背景上。如果你给 .navbar 设了深色，但没给 .navbar-collapse.show 加背景，按钮就会“漂”在深色背景上，悬停态颜色却按浅色逻辑算，导致发灰或不可见。
解决办法很简单：
- 给
.navbar-collapse.show显式加背景：background-color: var(--bs-navbar-bg); - 或者统一用变量控制：
:root { --bs-navbar-dropdown-bg: #343a40; }（这个变量专管下拉菜单背景，不影响主导航栏） - 别忘了同步调整
--bs-navbar-dropdown-color，否则弹出菜单里的文字可能和背景同色
最易忽略的一点：这些变量在 @media (prefers-color-scheme: dark) 下不会自动切换，必须手动重设——否则深色模式下按钮文字直接消失。
