直接改.navbar-collapse.show或.dropdown-menu的background-color，需先确认是collapse模式（data-bs-toggle="collapse"）还是dropdown模式（data-bs-toggle="dropdown"）；前者背景由.navbar-collapse.show控制，后者由--bs-navbar-dropdown-bg变量或.dropdown-menu样式控制。
直接改 .navbar-collapse 或 .dropdown-menu 的 background-color，但必须先确认你用的是 collapse 模式还是 dropdown 模式——改错地方就完全没效果。
先看 DOM 结构：collapse 模式 vs dropdown 模式
Bootstrap 5 导航栏在移动端折叠后，菜单渲染路径完全不同，背景色控制目标也不同：
- 如果你用
data-bs-toggle="collapse"（标准响应式写法），展开内容在.navbar-collapse.show内部，真正撑开菜单区域的是.navbar-nav容器，它默认background-color: transparent - 如果你把整个折叠区包进
<div class="dropdown">，并用data-bs-toggle="dropdown"触发，则实际弹出的是.dropdown-menu元素，它的背景由 CSS 变量--bs-dropdown-bg控制 - 检查方式：打开 DevTools，点开汉堡菜单，找带
show类的元素 —— 如果是.navbar-collapse.show，就走 collapse 路线；如果看到.dropdown-menu直接挂载在.navbar下，那就是 dropdown 模式
collapse 模式下改背景色：盯住 .navbar-collapse.show
这是最常见也最容易踩坑的场景。很多人给 .navbar-collapse 加 background-color，但静态时它 display: none，根本不会渲染背景；必须作用于 .navbar-collapse.show 才生效。
- 写法示例：
.navbar-collapse.show { background-color: #1a252f; } - 加媒体查询更稳妥（避免影响桌面端）：
@media (max-width: 767.98px) { .navbar-collapse.show { background-color: #1a252f; } } - 别漏掉
overflow: visible——.navbar-collapse默认有overflow: hidden，若菜单项高度超出容器，背景会被裁掉 - 如果用了自定义
.navbar-nav样式（比如加了 padding 或 margin），它可能“漂浮”在.navbar-collapse.show背景之上，此时得给.navbar-nav也设background-color
dropdown 模式下改背景色：优先用 CSS 变量
Bootstrap 5.3+ 提供了专用于此的变量 --bs-navbar-dropdown-bg，比硬写 .dropdown-menu { background-color: ... !important } 更干净、可维护性更高。
- 全局生效（所有 navbar 下拉菜单）：
:root { --bs-navbar-dropdown-bg: #2c3e50; } - 只影响当前 navbar（避免污染其他下拉组件）：
.navbar .dropdown-menu { background-color: #2c3e50; } - 注意：加
!important很可能绕不过 Bootstrap 的var(--bs-dropdown-bg)优先级，变量方式更可靠 - 深色模式下需单独处理：
@media (prefers-color-scheme: dark) { :root { --bs-navbar-dropdown-bg: #1a202c; } }
为什么加了样式还是白底或透明？三个高频失效点
不是代码写错，而是结构或加载顺序出了问题：
-
<style>或自定义 CSS 文件写在 Bootstrap 的<link rel="stylesheet">之前 —— 浏览器按顺序加载，后加载的样式才能覆盖前者的规则 - DOM 中没找到
.navbar-collapse.show—— 确认 JS 已加载且未报错，点击汉堡按钮后，该元素是否真的被加上了show类 - 父级
.navbar没设背景色，而.navbar-collapse.show是position: absolute，导致它“悬空”，底下页面内容透上来，看起来像背景失效（其实是透明 + 透底）
最易被忽略的是：collapse 模式下，.navbar-collapse.show 本身不撑高，真正决定菜单区域高度的是子元素 .navbar-nav；如果它没设背景，再深的 background-color 也只是一条窄缝。
