text-white在.nav-link上无效，因Bootstrap文字色由navbar-dark等语义类及CSS变量控制，其优先级高于工具类；navbar-dark需与bg-dark同置<nav>上才生效，否则文字仍为灰色。
为什么加了 text-white 没用
直接给 <nav> 或 <a class="nav-link"> 加 text-white 常常无效，因为 Bootstrap 的文字颜色由语义类（如 navbar-dark）或 CSS 变量控制，而工具类 text-white 优先级低，容易被覆盖。
更关键的是：navbar-dark 不是“让文字变白”的开关，它是一组预设变量的载体——它设置 --bs-navbar-color、--bs-navbar-brand-color 等，这些变量才真正决定文字色。单独加 text-white 绕过了这套机制，且在深色背景上可能被 .nav-link:hover 或下拉菜单样式二次覆盖。
- 检查开发者工具中
.nav-link计算后的color，若仍是灰色，说明navbar-dark没生效，或被其他 CSS 覆盖 -
text-white对.navbar-toggler-icon无效——它的颜色来自 SVG 的fill，继承自父级文字色，不是普通文本 - 如果用了
bg-dark但没配navbar-dark，文字会按浅色逻辑渲染（灰黑），text-white仍可能被.nav-link:not(.active)规则压制
navbar-dark 必须和 bg-dark 同时存在
navbar-dark 本身不设背景色，只定义文字/图标色；bg-dark 才提供深色背景。二者缺一不可，且必须写在同一个 <nav> 元素上：
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Logo</a>
<div class="navbar-nav">
<a class="nav-link active" href="#">首页</a>
<a class="nav-link" href="#">关于</a>
</div>
</nav>-
navbar-dark会把.nav-link默认设为白色（color: var(--bs-navbar-color)），.navbar-brand也设为白色 -
bg-dark提供background-color: #212529，确保白色文字有足够对比度 - 别用
bg-black替代bg-dark：OLED 屏上bg-black+ 白字易发虚，且navbar-dark的变量默认适配的是bg-dark的灰度 - 移动端折叠后，
.navbar-collapse容器默认无背景色，需额外加bg-dark到该元素上，否则弹出菜单是透明底，文字看不清
自定义白色文字但不用 navbar-dark
如果你已用 bg-primary 或自定义色值（如 rgba(30, 40, 50, 0.95)），navbar-dark 会失效（它只对 bg-dark/bg-light 做有限适配）。此时必须手动覆盖变量或 CSS：
- 推荐方式（CSS 变量）：
<nav class="navbar navbar-expand-lg" style="--bs-navbar-color: white; --bs-navbar-brand-color: white;">
—— 注意：这仅影响常规状态，:hover和.active需单独设--bs-navbar-active-color - 更稳妥方式（CSS 类）：
.navbar-custom-white .nav-link, .navbar-custom-white .navbar-brand { color: white !important; } .navbar-custom-white .nav-link:hover, .navbar-custom-white .nav-link.active { color: #e2e8f0 !important; /* 浅灰 hover 色，避免刺眼 */ } - 千万别只改
.nav-link：漏掉.navbar-brand、.navbar-toggler-icon（需filter: brightness(10)或重写 SVGfill）会导致部分文字仍是黑的
动态切换时文字色错乱怎么办
Vue/React 中用响应式 class 切换深浅模式时，常见错误是混用 data-bs-theme="dark" 和 navbar-dark。它们职责不同，不能互换：
- 全局主题（影响
.card、.btn）→ 改document.documentElement.dataset.bsTheme - 导航栏局部样式 → 用 class 绑定：
:class="{ 'navbar-dark': isDark, 'navbar-light': !isDark }"和:class="{ 'bg-dark': isDark, 'bg-light': !isDark }" - 绝对禁止：
<nav data-bs-theme="dark" class="navbar-light bg-light">—— 这会让文字变黑、背景变浅，直接不可读 - 切换后检查
.navbar-toggler-icon：若图标消失，大概率是父级color被设为透明或极暗，需用filter: invert(1)或内联style="fill: white"强制修复
最易被忽略的是折叠菜单弹出层——它用 .dropdown-menu 渲染，文字色由 --bs-dropdown-color 控制，和导航栏变量无关，必须单独处理。
