折叠菜单在移动端展开时透明，是因为 .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 节点。
