Bootstrap 5 已彻底移除 fixed-bottom 类，浏览器将其视为无效字符串而忽略；正确做法是用 d-flex flex-column min-vh-100 + flex-fill 布局实现吸底页脚，或严格满足 DOM 顺序与容器条件使用 sticky-bottom。
为什么直接加 fixed-bottom 没用
Bootstrap 5 已从源码中彻底移除 fixed-bottom 类，浏览器会把它当普通类名忽略。你写 <footer class="fixed-bottom">，computed styles 里根本看不到 position: fixed 生效——不是你漏写，是框架压根不认这个字符串。
更麻烦的是，如果父容器有 position: relative 或 overflow: hidden，哪怕手动加 position: fixed，定位参考也会错位（以父容器为基准，而非视口）。
d-flex flex-column min-vh-100 是唯一可靠起点
这是 Bootstrap 5 官方推荐、语义清晰且兼容性最好的方式，核心不在“加什么类”，而在高度链是否打通。
-
<body>必须设class="d-flex flex-column min-vh-100"：不能用height: 100vh，否则内容超长会被截断 -
<main>必须设class="flex-fill"（等价于flex: 1 1 auto），不是flex-grow-1或手写style="flex: 1"，后者易与工具类冲突 -
<footer>放在<main>之后，且是<body>的最后一个子元素；不要加position: absolute、transform或display: none，否则破坏 flex 上下文
为什么 sticky-bottom 大概率失效
sticky-bottom 是 Bootstrap 5.3+ 新增的工具类，本质是 position: sticky; bottom: 0，但它对 DOM 结构和父容器限制极严：
立即学习“前端免费学习笔记（深入）”；
-
<footer>必须是其**直接父容器**的最后一个子元素（DOM 顺序靠后） - 父容器不能有
overflow-y: hidden（sticky 会直接失效） - 父容器需有明确高度锚点，比如
min-height: 100vh；只靠min-vh-100不够，因为sticky需要滚动空间才能触发 - 移动端软键盘弹出时，
sticky-bottom常常失粘——这不是 bug，是浏览器对 viewport height 的重算延迟
内容动态加载后页脚上浮？别怪 Flex 布局
AJAX 渲染、图片懒加载完成、i18n 切换后页脚突然上浮或留白异常，通常不是布局失效，而是浏览器未及时响应 DOM 变化。
- 手动触发重排：操作完内容后执行
document.body.offsetHeight（读取一个布局属性即可） - 避免对
<footer>使用display: none切换，改用visibility: hidden+opacity: 0，保持占位尺寸 - 检查
<main>内是否嵌套了带固定高度的容器（如height: 90vh的<div>）——这会切断 flex 填充链，flex-fill彻底失效
最容易被忽略的破坏点，是给 <main> 里的 <div class="container"> 加了 height: 100% 或 min-height: 100%：子容器一旦设固定高度，flex-fill 就失去作用。
