Bootstrap导航栏折叠后的背景色怎么改-Bootstrap教程-PHP中文网

核心是先确认 data-bs-toggle="collapse" 还是 data-bs-toggle="dropdown"：collapse 模式下改 .navbar-collapse.show 背景色，dropdown 模式下改 .dropdown-menu 或 --bs-navbar-dropdown-bg，并确保 css 加载顺序正确、无 overflow 遮挡。

bootstrap导航栏折叠后的背景色怎么改

改不对地方就完全没效果，核心是先确认你用的是 data-bs-toggle="collapse" 还是 data-bs-toggle="dropdown" 模式——两者的 DOM 结构、CSS 作用目标完全不同。

怎么判断自己用的是 collapse 模式还是 dropdown 模式

打开浏览器 DevTools，点开汉堡菜单，观察展开后的 DOM：

如果看到 .navbar-collapse.show 包裹着 .navbar-nav，那就是 collapse 模式（Bootstrap 官方推荐写法）
如果看到 .dropdown-menu 直接挂在 .navbar 下、且父级有 .dropdown 类，那就是 dropdown 模式（常见于手动封装或旧项目迁移）
collapse 模式下 .navbar-collapse 默认 background-color: transparent，它只是容器，不渲染可见背景块
dropdown 模式下真正撑起菜单区域的是 .dropdown-menu，它的背景由 CSS 变量 --bs-dropdown-bg 或直接 background-color 控制

collapse 模式下改背景色：盯住 `.navbar-collapse.show`

这是最常踩坑的场景。很多人给 .navbar-collapse 加 background-color，但静态时它 display: none，根本不会渲染；必须作用于展开态。

Bootstrap

Bootstrap 5.3.8 编译版包含可直接用于项目的 CSS、JavaScript 和插件文件，适合快速搭建响应式网页。

下载

正确写法：

.navbar-collapse.show {
  background-color: #1a1d22 !important;
}

如果想让背景只覆盖导航项区域（避免上下留白），可加到子元素：
```
.navbar-collapse.show .navbar-nav {
  background-color: #1a1d22;
}
```
别漏掉移动端断点限制：如果你只希望在小屏生效，套一层 @media (max-width: 991.98px)
注意 !important 很可能绕不过 Bootstrap 5 的变量优先级，尤其当项目用了 Sass 并重定义了 $navbar-collapse-transparency

dropdown 模式下改背景色：直接动 `.dropdown-menu` 或 `--bs-navbar-dropdown-bg`

这个模式下，--bs-navbar-dropdown-bg 是专为导航栏折叠菜单设计的变量（Bootstrap 5.3+），但它只对 .dropdown-menu 生效，和 collapse 模式无关。

全局改法（推荐）：

:root {
  --bs-navbar-dropdown-bg: #1a1d22;
}

局部改法（避免影响其他下拉组件）：

.navbar .dropdown-menu {
  background-color: #1a1d22 !important;
}

如果用了深色模式，记得同步适配：

@media (prefers-color-scheme: dark) {
  :root { --bs-navbar-dropdown-bg: #0d1117; }
}

别忘了连带调 --bs-dropdown-color 和 --bs-dropdown-link-hover-bg，否则文字可能看不清

为什么加了样式还是没变

大概率掉进这三个坑里：

你的自定义 CSS 文件或 <style></style> 标签写在 Bootstrap 的 bootstrap.min.css 之前，被默认样式覆盖了——确保它在 <link rel="stylesheet"> 之后加载
.navbar-collapse 或 .dropdown-menu 被父级设置了 overflow: hidden 或裁剪容器，导致背景显示不全；检查 z-index 和 position
用了 background: rgba(...) 简写，意外清掉了 background-image: linear-gradient(...) 以外的必要声明（比如 background-position），建议拆成 background-color + background-image: none