必须为 fixed-top 导航栏后的内容手动预留顶部间距，推荐在首个容器加 pt-6（64px），自定义高度时用内联 style="padding-top: Xpx"；移动端下拉菜单被截断需给 .navbar-collapse 加 position: relative 或用 data-bs-popper="static"；横向滚动用 .navbar-nav-scroll；下拉菜单对齐偏移应设 top: 100% !important。
fixed-top 导航栏高度不匹配导致内容被遮挡
加了 fixed-top 但页面首屏文字从导航栏底下钻出来，不是 Bootstrap 失效，是 position: fixed 让导航脱离文档流，后续内容直接顶到顶部——必须手动预留空间。
默认 navbar 高度约 56px，Bootstrap 5 推荐用 pt-5（对应 3rem = 48px）起步，但实际常不够。更稳妥的做法：
- 在紧接
<nav>后的第一个容器（如<main>或<div class="container">）上加pt-5，再根据浏览器渲染微调：pt-6（4rem = 64px）更常见 - 若自定义了 navbar 高度（比如
style="height: 72px"或加大padding、font-size），别硬套pt-xxl-*，直接写内联样式：style="padding-top: 72px" - 避免在
body或顶层 wrapper 上设margin-top: -20px、position: relative等干扰计算的样式，会破坏 padding 补偿逻辑
移动端下拉菜单被 fixed-top 截断
小屏幕点开 navbar-toggler，下拉项只显示半截——根本原因是 .dropdown-menu 默认用 position: absolute，而父容器没设 position: relative，定位参考的是 viewport，正好被 fixed 导航栏压在下面。
解决方法不是调 z-index，而是改定位上下文：
- 给
.navbar-collapse加position: relative（Bootstrap 5 默认没设，需手动补） - 或改用
data-bs-popper="static"属性禁用 Popper.js 动态定位：<ul class="dropdown-menu" data-bs-popper="static"> - 检查是否误写了
@media (max-width: 991.98px) { .dropdown-menu { top: 100% } }—— 移动端折叠状态不需要这个规则，删掉
导航栏内部内容水平溢出时滚动而非换行
当 .navbar-nav 里塞太多菜单项，小屏下默认会折行或触发折叠按钮；如果想强制横向滚动（比如展示一排图标导航），不能只靠 flex-nowrap。
关键是要限制容器宽度 + 开启横向滚动：
- 给
.navbar-nav包裹一层<div class="navbar-nav-scroll">（Bootstrap 5 内置类，自动设overflow-x: auto和white-space: nowrap） - 确保父容器（如
.navbar-collapse）没有overflow: hidden或flex-wrap: wrap干扰 - 如果滚动条太丑，可加自定义 CSS 隐藏：
.navbar-nav-scroll::-webkit-scrollbar { display: none; }，但保留原生滚动能力
自定义高度后 dropdown-menu 垂直对齐偏移
改高了 navbar，下拉菜单的 top 值还是按默认 56px 算，结果悬在半空或贴着 navbar 底边——这是因为 .dropdown-menu 的定位依赖父级 .nav-item 的 offsetTop，而自定义高度后这个值没同步更新。
最稳的解法是绕过 JS 计算，用 CSS 锁死位置：
- 给
.dropdown-menu加top: 100% !important，确保始终紧贴父项底部 - 若仍偏移，检查
.nav-link是否有额外padding或line-height影响基线，统一用height+display: flex+align-items: center控制垂直居中 - 避免在
@media查询里重复定义.dropdown-menu的top，容易和 Popper 冲突
