fixed-top类必须配手动顶部留白：在首个内容容器加pt-6或内联padding-top，锚点跳转用scroll-margin-top，下拉菜单需设.navbar-collapse为relative或禁用Popper。
fixed-top类必须配手动顶部留白
加了 fixed-top 后内容被顶到导航栏底下，不是 Bootstrap 失效，是 position: fixed 本身脱离文档流的必然结果。Bootstrap 不会自动给 加 padding，所谓“自动适配”只存在于某些旧版本文档误解里。
正确做法是在 <nav class="navbar fixed-top"></nav> 后面紧挨着的第一个块级容器（比如 <main></main>、<header></header> 或 <div class="container">）上加内边距：
<ul>
<li>默认 navbar 高度约 56px，用 <code>pt-6（4rem = 64px）比 pt-5（3rem = 48px）更稳妥
font-size 或 padding），打开开发者工具运行：getComputedStyle(document.querySelector('.navbar')).height，拿到真实像素值后直接写内联样式：style="padding-top: 72px"
padding-top —— 响应式下 navbar 高度会变，全局 padding 很难匹配所有断点mt-* 和 pt-*，也别给父容器加 transform 或 position: relative，会干扰定位上下文锚点跳转时内容仍被遮住怎么办
点击 <a href="#section"></a> 跳转后，目标元素顶部刚好卡在 navbar 底部，这是 scrollIntoView 默认行为导致的。不能靠 JS 滚动后硬调 window.scrollBy(0, -56) 硬编码偏移——移动端 navbar 高度可能不同，且页面加载时 hash 直接命中也会漏处理。
推荐用 CSS 原生方案，简洁可靠：
立即学习“前端免费学习笔记（深入）”；
- 给所有锚点目标元素（如
<section id="about"></section>）加scroll-margin-top：
section[id] {
scroll-margin-top: 64px;
}
- 值建议略大于 navbar 实际高度（比如取
64px或4rem），确保小屏缩放后仍有余量 - 这个属性在现代浏览器（Chrome 69+、Firefox 68+、Safari 15.4+）完全支持，无需 polyfill
- 如果必须兼容 Safari 15.3 及更早版本，再 fallback 到 JS：监听
click和DOMContentLoaded，用el.scrollIntoView()+window.scrollBy()，偏移量务必动态读取.offsetHeight
移动端下拉菜单被 navbar 截断
点开 navbar-toggler 后，.dropdown-menu 只显示半截，根本原因是它默认用 position: absolute，而父容器 .navbar-collapse 没设 position: relative，导致定位参考的是 viewport，正好被 fixed-top 导航栏压在下面。
- 最简解法：给
.navbar-collapse加position: relative（Bootstrap 5 默认不设，需手动补） - 更稳解法：在
.dropdown-menu上加data-bs-popper="static"，禁用 Popper.js 动态计算位置 - 删掉类似
@media (max-width: 991.98px) { .dropdown-menu { top: 100% } }这类冗余规则——移动端折叠状态不需要手动调top - 检查是否误给
.navbar加了transform或overflow: hidden，这会创建新层叠上下文，让下拉菜单 z-index 失效
sticky-bottom 替代 fixed-bottom 更安全
底部固定导航用 fixed-bottom 在 iOS Safari 和部分 Android 浏览器里容易被软键盘顶起或悬空，这不是 bug，是 viewport 行为限制。优先改用 sticky-bottom 类（Bootstrap 5.3+ 内置）：
-
sticky-bottom是position: sticky; bottom: 0，不脱离文档流，不会遮挡内容，也不受键盘弹出影响 - 要求父容器有明确高度或可滚动区域，推荐包裹一层：
<div class="d-flex flex-column min-vh-100">...</div> - 如果非用
fixed-bottom，必须为页面主体加padding-bottom（如pb-5），值略大于 navbar 高度；但切记：里面别放<input>或<textarea></textarea>，键盘一弹，fixed 元素就飘了
真正麻烦的从来不是加个 class，而是留白怎么算准、锚点怎么对齐、下拉菜单在哪定位——这些细节没对齐，fixed-top 就只是个视觉陷阱。
