应优先使用 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 nameviewport contentwidthdevice-width, initial-scale1 存在且没加 heightdevice-height 这类干扰项测试时真机优先Chrome DevTools 的设备模拟器不触发真实键盘行为容易误判如何让导航栏在滚动时始终可见但不遮挡内容用 position: sticky 替代 fixed 是更稳妥的选择尤其当页面主体有足够高度时。Bootstrap 5.3 已内置 sticky-bottom 类注意不是 fixed-bottom它本质是 position: sticky; bottom: 0会随容器滚动而“粘”在视口底边且不会脱离文档流。sticky-bottom 要求父容器有明确高度或可滚动区域否则退化为普通定位若父容器是 body需确保 body { height: 100vh; overflow-y: auto; }否则 sticky 失效在 iOS 15.4 之前sticky 对 body 或 html 直接生效支持不一致建议包裹一层 div classd-flex flex-column min-vh-100使用 fixed-bottom 时怎么避免内容被遮盖固定定位会脱离文档流必须手动为页面主体预留底部空间否则文字或按钮会被导航栏盖住。这个留白不能靠 JS 动态算要 CSS 静态兜底。 Adobe Image Background Remover Adobe推出的图片背景移除工具