折叠后下拉菜单背景色应改 .dropdown-menu 或 .navbar-collapse.show，具体取决于 collapse 模式或 dropdown 模式；CSS 变量 --bs-navbar-dropdown-bg 仅对 dropdown 模式生效，且需确保样式加载顺序、无 overflow 裁剪及行内样式干扰。
折叠后下拉菜单的背景色由 .dropdown-menu 控制，不是 .navbar-collapse
很多人以为改 .navbar-collapse 就能调折叠后的背景，其实它只是个容器包装器，真正渲染出菜单块的是里面的 .dropdown-menu（Bootstrap 5 默认结构中，折叠后的导航项会被包裹进一个 .dropdown-menu）。所以直接改 .dropdown-menu 的 background-color 才是正解。
-
.navbar-collapse默认是透明的，不设背景；它的子元素.navbar-nav也无背景 - 折叠后出现的“菜单面板”本质就是
.dropdown-menu，哪怕你没写dropdown类，Bootstrap 内部会自动补上 - 如果你用的是
data-bs-toggle="collapse"+data-bs-target方式（非 dropdown），那实际生成的是.navbar-collapse.show下的.navbar-nav，此时要改的是.navbar-collapse.show或其子容器背景
区分 collapse 模式和 dropdown 模式，改法完全不同
Bootstrap 5 导航栏折叠有两种常见实现路径，CSS 目标完全不一样：
-
collapse 模式（推荐，语义清晰）：用
data-bs-toggle="collapse"，折叠内容在.navbar-collapse内，此时背景色应设在.navbar-collapse.show上：.navbar-collapse.show { background-color: #821726; } -
dropdown 模式（旧习惯残留）：把整个折叠区域包进
.dropdown，靠.dropdown-menu展开。此时必须覆盖：.dropdown-menu { background-color: #821726 !important; }注意加!important很可能绕不过 Bootstrap 的 CSS 变量优先级
用 CSS 变量改更干净，但得看 Bootstrap 版本
Bootstrap 5.3+ 支持 --bs-navbar-dropdown-bg 变量，专为折叠下拉菜单背景设计。全局生效只需一行：
:root {
--bs-navbar-dropdown-bg: #821726;
}
但注意两点：
- 这个变量只对
.dropdown-menu生效，对纯collapse模式无效 - 如果你项目里用了 Sass 编译，且自定义了
$dropdown-menu-bg，那 CSS 变量会被覆盖——优先检查你自己的 Sass 变量是否已设
为什么加了样式没变？常见失效原因
改完没反应，八成掉进下面这些坑里：
- 你的
<style>标签写在 Bootstrap CSS<link>之前，被默认样式盖掉了——确保自定义样式<link rel="stylesheet">在 Bootstrap 之后加载 - 用了深色模式媒体查询，但没同步改
@media (prefers-color-scheme: dark)下的背景色，导致暗色下又变回默认白/灰 - 折叠容器设置了
overflow: hidden（比如某些主题框架加的），把带背景的.navbar-collapse.show裁掉了——检查 computed 样式里的overflow - 目标元素被 JavaScript 动态加了
style="background-color: ..."行内样式，CSS 无法覆盖——用开发者工具看 Elements 面板里是不是有style属性
