倒置导航栏需同时应用.navbar-dark与深色背景类（如.bg-dark），因.navbar-dark仅控制文字颜色而不设置背景；自定义背景时须调整--bs-navbar-color变量或覆盖相关选择器，并单独处理.navbar-collapse和下拉菜单的样式。
倒置导航栏颜色的本质是改 .navbar 的背景和文字对比度
Bootstrap 的 .navbar 默认用浅色背景配深色文字，所谓“倒置”，其实是切换成深色背景 + 浅色文字。这不是靠某个开关函数实现的，而是通过预设主题类或自定义 CSS 控制。官方提供 .navbar-dark 和 .navbar-light 两个基础修饰类，但它们只管文字/图标颜色，不自动设背景——背景得你来定，否则可能看不见文字。
-
.navbar-dark让内部链接、品牌名、图标变成白色系（color: #fff），但不会加background-color -
.navbar-light让文字变深灰（color: #212529），同样不带背景 - 如果只加
.navbar-dark却没设背景，导航栏还是透明或继承父容器色，文字可能直接“消失”
最简可行方案：用 .bg-dark 配合 .navbar-dark
Bootstrap 5 自带 .bg-dark（background-color: #343a40），和 .navbar-dark 天然匹配。这是最快能出效果的组合，无需写一行 CSS。
<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" href="#">首页</a>
<a class="nav-link" href="#">关于</a>
</div>
</nav>
-
.bg-dark提供可靠深色背景，.navbar-dark确保文字可读 - 避免只用
.bg-black：它太暗，部分图标/边框会糊成一片，可读性反而下降 - 别漏掉
.navbar-expand-lg类，否则在小屏下菜单默认折叠，可能误以为“没生效”
自定义深色背景时，必须重设 --bs-navbar-color 或覆盖 a.nav-link 颜色
如果你用自定义背景色（比如 #1a1d22），.navbar-dark 的默认文字色可能不够亮，尤其在低亮度屏幕下。这时不能只靠类名，得干预 CSS 变量或选择器。
- 推荐优先改 CSS 变量：
style="--bs-navbar-color: #e9ecef;"，它会统一影响品牌名、链接、折叠按钮图标 - 若用 Sass，可在变量文件里覆盖
$navbar-dark-color，但上线后无法动态切换 - 切忌只写
.navbar-dark a { color: #fff; }：这会漏掉.navbar-brand和响应式折叠按钮（.navbar-toggler-icon） - 检查
.navbar-toggler边框色，默认是rgba(255,255,255,.1)，在极深背景上可能看不见，需同步调亮
移动端折叠菜单弹出后，背景和文字仍需手动控制
.navbar-collapse 展开后的区域默认是白底黑字，和深色导航栏断裂。这个区域不属于 .navbar-dark 的作用范围，必须单独处理。
- 给
.navbar-collapse加class="bg-dark"是最直接办法，但注意它只对展开态生效 - 如果用了
.dropdown，下拉菜单也默认白底，需额外加.dropdown-menu-dark（Bootstrap 5.3+）或手动设background-color - 测试真机：iOS Safari 有时对
backdrop-filter或半透背景渲染异常，深色菜单边缘容易发虚，建议用实色背景保底
