关键不是改.navbar本身，而是根据模式选择目标：collapse模式下改.navbar-collapse.show的background-color，dropdown模式下改.dropdown-menu或--bs-navbar-dropdown-bg变量，需先用DevTools确认DOM结构与模式匹配。
改移动端导航栏背景色，关键不是改 .navbar 本身，而是盯住展开后的容器——它在 collapse 模式下是 .navbar-collapse.show，在 dropdown 模式下是 .dropdown-menu。改错地方就完全没反应。
先确认你用的是 collapse 还是 dropdown 模式
打开浏览器 DevTools，点开汉堡菜单，看 DOM 中哪个元素带 show 类：
- 如果是
<div class="navbar-collapse collapse show">→ 走 collapse 模式，目标是.navbar-collapse.show - 如果看到
<ul class="dropdown-menu">直接挂在.navbar下 → 是 dropdown 模式，目标是.dropdown-menu - Bootstrap 5 默认响应式写法（
data-bs-toggle="collapse"）属于前者；手动包<div class="dropdown">才触发后者
collapse 模式：改 .navbar-collapse.show 的 background-color
这个容器默认 background-color: transparent，且有 overflow: hidden，不显色也不撑开内容：
- 必须加
.show类限定，否则静态时display: none，样式无效 - 推荐加媒体查询，避免影响桌面端：
@media (max-width: 991.98px) { .navbar-collapse.show { background-color: #1a252f; overflow: visible; /* 防止菜单项被裁掉 */ } } - 如果
.navbar-nav有 padding/margin，它可能“浮”在背景上，此时也要给它设background-color
dropdown 模式：优先用 --bs-navbar-dropdown-bg 变量
Bootstrap 5.3+ 提供了专用变量，比硬写 .dropdown-menu { background-color: ... !important } 更干净：
- 全局生效只需一行：
:root { --bs-navbar-dropdown-bg: #2c3e50; } - 注意：该变量只对
.dropdown-menu生效，对 collapse 模式下的.navbar-collapse.show无效 - 若项目用 Sass 编译，检查是否已定义
$dropdown-menu-bg—— 它会覆盖 CSS 变量 - 深色模式下需单独适配：
@media (prefers-color-scheme: dark) { :root { --bs-navbar-dropdown-bg: #1a202c; } }
为什么加了样式却还是白底？三个最常见坑
改完没变化，八成卡在这三处：
-
<style>或自定义 CSS 文件加载顺序错了——必须在 Bootstrap 的bootstrap.min.css之后引入 - 用了 collapse 模式却去改
.dropdown-menu，或反过来；DOM 结构和模式不匹配 -
.navbar-collapse有overflow: hidden，菜单项高度超出后背景被裁，导致“看不见”而非“没生效”
真正难的不是写几行 CSS，而是 inspect 元素确认渲染路径——移动端折叠菜单的背景从来不是单一层级的事。
