bootstrap 5 中 navbar 固定顶部须用 fixed-top 类并为 body 添加 pt-5 等上边距，避免内容遮挡；sticky-top 因高度计算问题不适用于 navbar；需调整 dropdown-menu 等组件 z-index 并处理移动端折叠错位。
Bootstrap 5 中 navbar 固定顶部的正确写法
Bootstrap 5 默认不自动固定导航栏，必须显式添加 fixed-top 类（不是 sticky-top），否则滚动时会消失。这个类会让 navbar 脱离文档流、用 position: fixed 锚定在视口顶部，但会导致页面顶部内容被遮挡——这是最常被忽略的副作用。
实操建议：
- 给
<nav></nav>元素同时加navbar和fixed-top类，例如：<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top"></nav> - 必须为
添加上边距（pt-5或自定义style="padding-top: 56px;"），值至少等于导航栏高度（默认约 56px），否则首屏内容会被遮住 - 避免在
fixed-top导航栏内使用container-fluid包裹整个 navbar；如果要居中内容，用container包裹navbar-brand和navbar-nav即可
为什么 sticky-top 在导航栏上表现异常
sticky-top 依赖父容器有高度且不溢出，而 Bootstrap 的 navbar 默认是 display: flex + flex-wrap: wrap，当子元素换行或高度变化时，容易触发 sticky 失效。更关键的是：移动端折叠菜单（navbar-collapse）展开后，sticky-top 无法响应高度突变，会出现“卡在半空”或突然跳回顶部的现象。
实操建议：
- 不要对整个
navbar使用sticky-top，它更适合侧边栏或小范围模块固定 - 若坚持用 sticky，需确保父容器（如
<header></header>）有明确高度，且navbar内部不触发重排（比如禁用折叠动画：transition: none） - 测试必须覆盖 iOS Safari 和 Chrome Android，这两个环境对
sticky的兼容性和触发时机差异最大
固定导航栏后，下拉菜单和模态框被遮挡怎么办
因为 fixed-top 让导航栏获得高 z-index（Bootstrap 5 默认是 1030），而下拉菜单（dropdown-menu）默认 z-index: 1000，模态框（modal）是 1055 —— 所以下拉菜单会被盖住，但模态框不会。这不是 bug，是 z-index 层级设计使然。
实操建议：
- 给
dropdown-menu加class="dropdown-menu-higher"并在 CSS 中覆盖：.dropdown-menu-higher { z-index: 1035 !important; } - 避免全局提高所有下拉菜单的 z-index，只作用于 navbar 内的下拉（即加
.navbar .dropdown-menu前缀） - 如果用了第三方组件（如 Select2、Flatpickr），它们的弹层通常没设 z-index，需单独定位并提升，例如：
.select2-dropdown { z-index: 1040 !important; }
移动端折叠菜单展开时，固定导航栏撑高或错位
根本原因是 navbar-collapse 在展开瞬间仍处于文档流中，而 fixed-top 的 navbar 高度未动态更新，导致视觉错位或底部留白。尤其在 iOS 上，Safari 渲染折叠动画时会短暂丢失 height 计算。
实操建议：
- 用 JavaScript 监听
show.bs.collapse和hide.bs.collapse事件，手动切换navbar的min-height或添加临时占位div - 更轻量的做法：给
.navbar-collapse加style="position: absolute; top: 100%; left: 0; right: 0;"，让它脱离布局流，再配合z-index控制层级 - 禁用 collapse 动画（
data-bs-animation="false"）能显著减少错位概率，但牺牲体验，仅作兜底
pt- 补丁，一上线就被产品指着说“首页第一屏看不见”。
