直接原因是position: fixed使导航栏脱离文档流，浏览器不为其预留空间，主内容自然渲染在其下方被遮盖；必须手动为内容容器设padding-bottom（含safe-area-inset-bottom）或改用sticky-bottom。
fixed-bottom 导航栏盖住底部文字的直接原因
加了 fixed-bottom 后，导航栏用 position: fixed; bottom: 0 脱离文档流，页面内容不会自动“让出底部空间”——浏览器就当它不存在，最后一行文字或按钮直接渲染在它底下，被视觉遮盖。
为什么不能只给 body 加 padding-bottom
看似简单，但容易踩三个坑：
- 移动端软键盘弹出时，
body的padding-bottom不会动态调整，导航栏可能被顶飞，而文字仍被压在原处 - 如果导航栏高度不固定（比如多行文字、图标随屏幕缩放变大），硬写
padding-bottom: 60px会过小或过大 -
body上设padding-bottom可能干扰min-vh-100或 flex 布局的高度计算，导致底部留白异常
sticky-bottom 是更稳妥的替代方案
它不脱离文档流，滚动时吸附到底部，且软键盘弹出时会随页面一起上移——真正解决“盖住”的根源问题。启用需满足三点：
- 父容器必须有明确高度和可滚动性：用
<div class="d-flex flex-column min-vh-100"> 包裹整个页面 <li> <code>sticky-bottom元素必须是该父容器的**最后一个子元素**（顺序不能错） - 避免直接作用于
或<main></main>：iOS 15.4 之前支持不稳定，真机测试必做
示例结构：
<div class="d-flex flex-column min-vh-100"> <main class="flex-grow-1">...内容...</main><nav class="navbar sticky-bottom">...菜单...</nav> </div>
如果非用 fixed-bottom 不可，怎么兜底防遮盖
必须静态预留空间，且优先作用于内容区而非 body：
- 给紧邻导航栏上方的内容容器加
pb-5（Bootstrap 5.3+ 中 ≈ 3rem），比默认 navbar 高度略大更安全 - 若 navbar 自定义了高度（如含大图标），用开发者工具查真实值：
getComputedStyle(document.querySelector('.navbar')).height，然后内联写style="padding-bottom: 72px" - 绝对不要在
fixed-bottom内放<input>或<textarea></textarea>：软键盘一弹，整个导航栏大概率悬空或移出视口
复杂点在于：fixed-bottom 的“遮盖”不是样式错误，而是它和软键盘、viewport 缩放、iOS Safari 的滚动行为三者叠加的结果——任何单点 CSS 修复都只是临时补丁，真正可靠的解法是从定位机制上切换。
