应优先使用 Bootstrap 5.3+ 的 sticky-bottom 类替代 fixed-bottom，它通过 position: sticky; bottom: 0 实现滚动时始终可见且不遮挡内容；若用 fixed-bottom，则需为内容区静态预留 padding-bottom 避免遮盖，并避免在其中放置 input 等触发软键盘的元素。
底部固定导航栏在小屏上被遮挡怎么办
直接加 fixed-bottom 类，但小屏下常被键盘、浏览器地址栏或系统手势栏顶起，导致导航栏“悬空”或部分不可见。这不是 bootstrap 的 bug，而是移动端 viewport 行为和 input 聚焦时页面重排的共性问题。
- 别依赖纯 CSS 固定定位应对所有场景；
fixed-bottom在 iOS Safari 和部分 Android 浏览器中对软键盘弹出无响应 - 确保
<meta name="viewport" content="width=device-width, initial-scale=1">存在且没加height=device-height这类干扰项 - 测试时真机优先：Chrome DevTools 的设备模拟器不触发真实键盘行为，容易误判
如何让导航栏在滚动时始终可见但不遮挡内容
用 position: sticky 替代 fixed 是更稳妥的选择，尤其当页面主体有足够高度时。Bootstrap 5.3+ 已内置 sticky-bottom 类（注意不是 fixed-bottom），它本质是 position: sticky; bottom: 0，会随容器滚动而“粘”在视口底边，且不会脱离文档流。
-
sticky-bottom要求父容器有明确高度或可滚动区域，否则退化为普通定位 - 若父容器是
，需确保body { height: 100vh; overflow-y: auto; }，否则 sticky 失效 - 在 iOS 15.4 之前，
sticky对或直接生效支持不一致，建议包裹一层<div class="d-flex flex-column min-vh-100"> <h3>使用 fixed-bottom 时怎么避免内容被遮盖</h3> <p>固定定位会脱离文档流，必须手动为页面主体预留底部空间，否则文字或按钮会被导航栏盖住。这个留白不能靠 JS 动态算，要 CSS 静态兜底。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap"><img src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="overflowclass">VPS Bootstrap</a> <p class="overflowclass">从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p> </div> <a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li>给主内容区加 <code>pb-5（Bootstrap 间距类）或自定义padding-bottom: 60px，值略大于导航栏高度（含 padding/margin） - 避免用
margin-bottom，它不影响父容器高度计算，可能造成底部空白不足 - 如果导航栏高度不固定（比如多行文字、图标变大），用
min-height+padding-bottom组合比硬编码像素更安全 - 不要在
fixed-bottom元素里放form-control或input—— 键盘弹出会把整个 fixed 元素顶上去，用户根本点不到
Bootstrap 4 和 5 的关键差异在哪
Bootstrap 4 没有 sticky-bottom，只能手写 .sticky-bottom { position: -webkit-sticky; position: sticky; bottom: 0; } 并自行处理兼容性；Bootstrap 5.2+ 才正式支持该类，且默认启用 prefers-reduced-motion 降级逻辑。
- BS4 中
fixed-bottom是唯一选择，必须配body { padding-bottom: 60px; }手动避让 - BS5 中
sticky-bottom在桌面端表现和fixed-bottom接近，但在移动端更守规矩——不会强行覆盖键盘，也不会因页面短而“浮”在半空 - 两者都不解决软键盘弹出时的焦点滚动问题，如需点击 input 后自动滚动到可视区，仍得用
element.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
input 或需要触控反馈的按钮，固定定位会破坏原生 focus 行为，这时候再“响应式”也没用——得换交互方式，比如收起导航、跳转新页或用 modal。
