改.navbar-collapse的css不生效是因为动画由.navbar-collapse.show的max-height过渡驱动，必须同步调整终点值，否则慢速动画下内容会被截断；正确做法是重写.navbar-collapse.show并声明max-height和transition，且自定义css需置于bootstrap.min.css之后。
直接改 .navbar-collapse 的 CSS 不生效，因为动画由 .navbar-collapse.show 的 max-height 过渡驱动，且必须同步调整终点值，否则慢速动画下内容会被截断。
为什么改 transition 属性没反应
Bootstrap 4 的移动端菜单展开动画完全依赖 CSS：.navbar-collapse 收起时是 height: 0; overflow: hidden，展开时靠 JS 添加 .show 类触发 max-height 过渡。但默认样式里没写 max-height，只写了 height: auto——而 auto 无法参与 transition。
- 错误做法：只给
.navbar-collapse加transition: height 0.5s，它对.show状态无效 - 正确位置：必须重写
.navbar-collapse.show，且声明max-height和transition - 自定义 CSS 文件必须放在
bootstrap.min.css之后加载，否则被覆盖
怎么安全调慢动画到 0.6s 并保持内容完整
把动画从默认的 0.35s 改成 0.6s 后，如果只显示前两行链接、底部空白，不是代码错了，是 max-height 终点值没跟着变大。浏览器对慢速过渡更严格，会按你写的终点值精确渲染高度。
- 不能用
max-height: none或max-height: 100%—— 它们不参与 transition，动画会立即跳到展开态 - 推荐写法：
.navbar-collapse.show { max-height: 120vh !important; transition: max-height 0.6s ease-in-out !important; } - 菜单项 ≤5 个时，可估算像素值：
max-height: 240px（每项约 48px + 余量），更轻量，减少低端机重排卡顿
下拉菜单（.dropdown）导致动画错位或跳变
折叠区里嵌了 .dropdown，点开二级菜单时出现“先展开、再突然撑高”或“动画中途跳一下”，根本原因是 .dropdown-menu 默认 position: absolute，不占 .navbar-collapse 高度，但它的父容器（如 .nav-item）若有 min-height 或大 padding，实际内容高度就超了 max-height 终点值。
- 临时加
transition: none禁用动画，看是否还截断——若不截了，基本就是max-height不够 - 给
.nav-item去掉min-height，改用padding-block: 0.5rem控制间距 - 在
.navbar-collapse.show上加padding-bottom: 1rem预留空间，而非依赖自动撑开 - 真要让下拉菜单随文档流撑高：
.navbar-collapse.show .dropdown-menu { position: static !important; }
背景色在动画中闪烁（白底闪一下再变灰）
动画过程中背景色闪现，默认白色，是因为 .collapse 元素在过渡期还没应用 .show 的样式。过渡动画本质是「状态切换」，不是「样式渐变」。
- 正确解法：把目标背景色提前写到
.navbar-collapse基础态，而不是只靠.show - 例如：
.navbar-collapse { background-color: #f5f5f5; transition: background-color 0.35s ease; } - 同时补上：
.navbar-collapse.collapsing, .navbar-collapse.show { background-color: #f5f5f5; } - 避免用内联
style，也别依赖父级.navbar的背景色覆盖，必要时加!important
最常被忽略的是：动画变慢后，max-height 终点值必须同步增大，且必须是可动画的固定值（vh 或 px），不能靠 JS 算真实高度——Bootstrap 的 collapse 插件不提供这个钩子，CSS 就是唯一可控层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
