Bootstrap 默认的 .collapse 过渡动画在展开瞬间会继承父级（如 .navbar）的白色背景，导致灰色自定义样式仅在动画结束后才生效；需通过 CSS 优先级控制或内联样式覆盖 .collapse 的初始状态，确保过渡全程保持目标背景色与间距。
bootstrap 默认的 `.collapse` 过渡动画在展开瞬间会继承父级（如 `.navbar`）的白色背景，导致灰色自定义样式仅在动画结束后才生效；需通过 css 优先级控制或内联样式覆盖 `.collapse` 的初始状态，确保过渡全程保持目标背景色与间距。
在使用 Bootstrap 4/5 构建响应式导航栏时，一个常见但易被忽视的问题是：移动端折叠菜单（.navbar-collapse）在点击展开按钮后，过渡动画过程中短暂显示为白色背景（即父级 .navbar 的背景色），而你为其 .show 状态设置的灰色背景（如 #f5f5f5）仅在动画完成后的“静止帧”才生效——这正是你截图中“过渡中白、过渡后灰”的根本原因。
根本原因：CSS 过渡时机与选择器权重不匹配
Bootstrap 的 .collapse 组件在展开过程中会经历以下状态变化：
- 初始：.collapse（隐藏，height: 0, opacity: 0）
- 过渡中：.collapsing（正在展开，height 动画中，但尚未添加 .show 类）
- 完成后：.collapse.show（完全展开，height: auto, opacity: 1）
而你的 CSS 仅作用于 .navbar .show（且限定在特定媒体查询内），并未覆盖 .collapsing 阶段的样式。此时浏览器会回退到 .navbar 的白色背景，造成视觉“闪白”。
正确解决方案：覆盖 .collapsing 与 .collapse.show 的初始状态
推荐使用 纯 CSS 方案（优于内联 style，更可维护）：
/* 针对移动端折叠菜单容器，覆盖所有展开相关状态 */
@media (max-width: 991.98px) { /* Bootstrap 默认移动端断点 */
.navbar-collapse {
background-color: #f5f5f5 !important; /* 强制初始背景 */
border-bottom: solid 1px black;
border-radius: 5px;
padding: 10px 0; /* 注意：padding 不影响 height 动画，但需保证内容内边距 */
}
/* 确保过渡中和展开后均保持一致样式 */
.navbar-collapse.collapsing,
.navbar-collapse.show {
background-color: #f5f5f5 !important;
/* 若需微调过渡效果，可额外添加 */
transition: background-color 0.3s ease, padding 0.3s ease;
}
}✅ 关键点：
- 使用 !important 是必要的——因为 Bootstrap 的 .collapsing 内联 height 和默认样式权重较高；
- 将规则作用于 .navbar-collapse 而非 .navbar .show，确保容器自身从过渡开始就携带正确背景；
- @media (max-width: 991.98px) 比手动写 (min-width:345px) and (max-width: 379px) 更符合实际响应逻辑（覆盖所有移动端尺寸）。
补充建议：避免 ::before/::after 的误区
虽然你曾考虑伪元素，但此问题与伪元素无关。.collapsing 的过渡由 height 和 opacity 控制，背景色需直接作用于 .navbar-collapse 本身。伪元素无法覆盖其盒模型背景，反而增加复杂度。
最终验证步骤
- 清除浏览器缓存，强制重载；
- 在 Chrome DevTools 中勾选 “Emulate mobile”，触发折叠菜单；
- 点击切换按钮，观察过渡过程是否全程为灰色背景，无白色闪烁；
- 检查 .navbar-collapse 元素在 .collapsing 状态下是否已应用上述 CSS。
通过精准定位 .collapsing 状态并提升选择器优先级，即可一劳永逸解决 Bootstrap 移动端导航过渡闪烁问题，无需修改 HTML 结构或依赖 JS 干预。
