加fixed-top类后需手动为首个内容容器添加pt-5或pt-6预留顶部间距，若自定义navbar高度则用内联style精确匹配；同时须设.navbar-collapse为position: relative以修复下拉菜单定位，并确保viewport meta正确及无干扰CSS。
fixed-top 类能实现吸顶，但加了就完事？不是。它会让导航脱离文档流，后续内容直接顶到视口顶部，不手动留白就会被盖住。
加 fixed-top 后内容被遮挡怎么办
这是最常卡住人的第一步。Bootstrap 5 的 fixed-top 不会自动帮你调整个体布局，必须人工干预后续内容的位置：
-
fixed-top导航栏默认高度约 56px，紧随其后的容器（比如<div class="container">）需加 <code>pt-5（≈48px）或pt-6（≈64px）补足；若自定义了更大 padding/font-size，直接写内联样式style="padding-top: 72px"更可靠 - 别用
mt-5给第一个区块设外边距——它可能和自身 margin 叠加，造成空白过大 - 确认
<nav></nav>是的直接子元素，嵌在<header></header>或其他 wrapper 里会导致定位基准偏移 - 必须显式添加
<button class="navbar-toggler"></button>，且带data-bs-toggle="collapse"和data-bs-target="#navbarNav"（注意 Bootstrap 5+ 是data-bs-*，不是旧版data-toggle） -
data-bs-target的值必须和折叠容器的id完全一致，大小写、符号都不能错 - 折叠容器必须是
<div class="collapse navbar-collapse">，不能漏掉 <code>collapse类，否则 JS 不识别 - 确保已引入 Popper 和 Bootstrap JS（CDN 中顺序不能错：jQuery 已弃用，Bootstrap 5+ 依赖 @popperjs/core）
<div class="navbar-collapse"> 默认没有 <code>position: relative，导致其内部.dropdown-menu（position: absolute）以 viewport 为参考，被 fixed 元素压在下面- 给
.navbar-collapse加上position: relative即可修复 - 如果用了自定义动画（如
fade），检查.dropdown-menu的z-index是否 ≥ 1031（.navbar默认是 1030） - 避免在
<nav></nav>外层加transform或filter，它们会创建新层叠上下文，干扰 fixed 定位 - 优先用 Bootstrap 内置结构：
<ul class="navbar-nav ms-auto"></ul>（ms-auto是 Bootstrap 5+ 的写法，对应 margin-left: auto） - 确保
<nav></nav>没被<div class="container"> 包裹——容器限制宽度，左右内容无法撑满 <li>如果仍不对齐，检查是否误删了 <code>navbar-expand-*类，它控制 flex 布局的触发断点
真正麻烦的不是写对那几行 HTML，而是
小屏幕下点不开菜单？检查 navbar-toggler 和 data-target
响应式折叠不是靠 navbar-expand-lg 单独生效的，它只控制“什么时候展开”，不提供“怎么展开”的逻辑：
下拉菜单在固定导航下被截断？关键在父容器定位
iOS Safari 和部分 Android 浏览器里，fixed-top 导航栏 + 下拉菜单常出现“只显示半截”的问题，根源不是 z-index 低，而是定位上下文丢失：
右侧导航项对不齐？别硬写 margin-left: auto
想让 logo 居左、链接居右，很多人直接给 <ul class="navbar-nav"></ul> 加 ml-auto，结果在小屏折叠后失效或错位：
fixed-top 引发的连锁反应：它不占空间，但要求你对 body 高度、下拉定位、滚动交互、移动端兼容全部负全责。漏掉任意一环，用户看到的就是错位、遮挡或点不动。
