Bootstrap 5 中 sticky-bottom 类不生效，因其本质是 position: sticky + bottom: 0，依赖父容器有可滚动高度且元素未脱离滚动流；短内容时无滚动，sticky 不触发，元素退回到文档流末尾；真正固定需用 position: fixed 并预留内容底部空间。
为什么 sticky-bottom 类在 Bootstrap 5 里不生效
因为 Bootstrap 5 的 sticky-bottom 并非真正“固定在视口底部”，它只是给元素加了 position: sticky; bottom: 0;，而 sticky 生效的前提是父容器有滚动高度且元素未脱离滚动流——如果页面内容很短，父容器没溢出，sticky-bottom 就完全不会触发，工具栏会随文档流堆在内容末尾，而不是“钉”在屏幕底边。
常见错误现象：sticky-bottom 在小屏或空页面上直接消失不见，检查 computed styles 会发现 position 被浏览器忽略（position: static 回退）。
- 必须确保该元素的**最近定位祖先**（通常是
<body>或一个设置了overflow-y: auto的容器）具备可滚动高度 - Bootstrap 5 默认未给
<body>设min-height: 100vh，导致短内容下无滚动，sticky 失效 - 若工具栏放在
<footer>内但<footer>是文档流末端，sticky 依然无效——它需要“上方有足够空间可粘住”
用 position: fixed 实现真·固定底部（兼容所有 Bootstrap 版本）
这是最直接、最可控的方式，绕过 sticky 的行为限制，适用于工具栏需始终可见、不随内容滚动的场景（如编辑器底部状态栏、聊天输入框）。
关键点不是“加个 class”，而是手动控制层级、尺寸和响应式避让：
- 给工具栏添加
position: fixed; bottom: 0; left: 0; right: 0;，并显式设z-index（如z-index: 1030，高于 Bootstrap 的 modal-backdrop） - 必须为
<main>或主要内容容器预留底部内边距（padding-bottom），值 ≥ 工具栏高度，否则内容会被遮挡 - 在移动端需额外处理：用
@media (max-width: 768px)限制工具栏宽度或调整高度，避免挤压输入框等交互元素 - 若页面使用
container布局，工具栏建议脱离 container，用container-fluid或直接写死width: 100%
示例结构：
<main class="pb-5"> <!-- 预留 5rem 底部空间 -->
<!-- 页面内容 -->
</main>
<div class="fixed-bottom bg-light border-top" style="height: 5rem; z-index: 1030;">
<div class="container-fluid d-flex align-items-center h-100">
<button class="btn btn-sm btn-primary">提交</button>
</div>
</div>Flexbox 全高布局 + margin-top: auto 实现“伪 sticky”底部（适合内容高度不确定但需撑满视口）
当你要的是“内容不够高时底部顶到视口底边，内容足够高时自然沉到底部”，而非“永远固定”，这个方案比 fixed 更符合语义，且无需手动计算 padding。
核心是让 body 或 wrapper 成为 flex 容器，并把工具栏设为自动外边距推到底部：
- 给
<body>加display: flex; flex-direction: column; min-height: 100vh; - 给
<main>加flex: 1;（占满剩余空间） - 给工具栏容器（如
<footer>）加margin-top: auto;，它就会被挤到 flex 主轴末端 - Bootstrap 5 的
.d-flex和.flex-column可复用，但min-height: 100vh必须手写，因为 Bootstrap 不提供min-vh-100给 body
注意：此法下工具栏仍属文档流，滚动时会随内容上移，不是固定定位；但它解决了“短页底部悬空”的问题，且无 fixed 的遮挡风险。
移动端键盘弹出时 fixed 工具栏被顶起或错位
iOS Safari 和部分安卓 WebView 下，软键盘弹出会改变视口高度，导致 fixed 元素位置异常（比如被顶到键盘上方、甚至消失）。这不是 Bootstrap 的锅，是浏览器对 visualViewport 事件响应不一致导致的。
实操建议只做轻量修复，避免重写整个布局：
- 监听
resize事件，检测window.innerHeight突然变小（通常 ≤ 400px），临时将工具栏切回position: absolute; bottom: 0;，并用transform: translateY(...)微调 - 更稳妥的做法：对输入框（
<input>,<textarea>）加focus事件，在聚焦时给工具栏加.d-none，失焦再恢复——虽然体验略顿，但 100% 可控 - 绝对不要依赖
viewportmeta 的height=device-height，现代浏览器已基本忽略它
容易被忽略的一点：iOS 上 fixed 元素若内部含 transform 或 will-change，可能触发合成层异常，导致键盘收起后位置卡住——保持工具栏样式极简，避免不必要的 CSS 触发属性。
