为何Bootstrap的导航栏在折叠后背景变透明

折叠菜单在移动端展开时透明，是因为 .navbar-collapse 容器未设置背景色且不继承 .navbar 背景；需显式为其添加 bg-white 等类，而非仅控制 .navbar 的 background-color。

这不是 Bootstrap 的“设计特性”，而是折叠菜单（.navbar-collapse）在移动端展开时，其容器默认没有设置背景色，同时父级 .navbar 又被移除了 .bg-* 类或显式设为 transparent —— 于是下拉区域就透出底下内容，看起来“变透明”了。

折叠菜单容器本身没设 background-color

Bootstrap 5 的 .navbar-collapse 是一个 div，它不继承 .navbar 的背景，也不自带背景色。一旦你给 .navbar 设了 background-color: transparent（比如为了实现滚动变色），那折叠后整个下拉区域就完全依赖自己有没有加背景：

• 没加任何 bg-* 类 → 透明，透出页面内容
• 加了 bg-white 或 bg-dark → 显示对应底色
• 只对 .navbar 设 background: transparent，但忘了处理 .navbar-collapse → 折叠后必然透明

移动端视口下 .navbar 默认被移除背景类

很多项目会用 JavaScript 在滚动时动态增删 .bg-white，但逻辑常写成 “滚动 > 10px 就加 .bg-white”，却忽略了：在小屏幕（max-width: 991.98px）下，折叠按钮出现，此时 .navbar 往往被脚本主动移除了所有 .bg-* 类以保初始透明 —— 导致哪怕你已经滚下去了，折叠菜单展开时依然没背景：

• 检查是否用了类似 navbar.classList.remove('bg-white', 'bg-dark') 的初始化逻辑，且没在折叠态下重新补上
• 更稳妥的做法是：只控制 .navbar 的背景，而给 .navbar-collapse 单独加类，例如 bg-body 或 bg-white
• 不要依赖 .navbar-light 这类预设类，它们内部绑定了 background-color，且优先级高，容易覆盖你的 transparent

box-shadow 和 border 也会干扰“透明感”

即使 background-color 是 transparent，如果 .navbar 或 .navbar-collapse 有 border、box-shadow，或者父容器（如 .container-fluid）设置了背景，都会让你误以为“背景没透”。调试时建议：

• 临时加 border: none !important 和 box-shadow: none !important
• 用浏览器开发者工具逐层检查 computed styles，看 background-color 真实值是不是 transparent 或 rgba(0, 0, 0, 0)
• 注意 .dropdown-menu 默认有 background-color: #fff，它和 .navbar-collapse 是两个元素——别把下拉项的白底当成导航栏背景

最易被忽略的一点：折叠菜单的背景色必须显式声明，不能指望它“自动继承”导航栏状态；而很多人只改了 .navbar 的类，却忘了 .navbar-collapse 是独立渲染的 DOM 节点。