固定底部用fixed-bottom类，需预留空间防遮挡；容器内居底用flex-column+mt-auto；align-items-end需父容器有明确高度才生效；响应式需min-vh-100配合安全区处理。
用 fixed-bottom 类实现固定底部定位
Bootstrap 5 提供了现成的工具类 fixed-bottom，它会把元素用 position: fixed 固定在视口底部。适合做全局底部栏、悬浮按钮或版权信息条。
常见错误是直接加在普通容器里却不处理父容器高度，导致内容被遮挡。必须确保主体内容留出足够底部空间（比如用 pb-5 或 mb-5）。
- 只对单个元素生效，不能嵌套在
flex-column容器里指望它“撑到底部” - 它脱离文档流，z-index 默认较低，需要时手动加
z-index类（如position-relative配合z-3） - 在移动端可能遮挡虚拟键盘，表单页慎用
<div class="fixed-bottom bg-dark text-white p-2"> <div class="container">© 2024 版权所有</div> </div>
用 Flexbox 的 mt-auto 实现弹性居底
当需要让某个子元素在父容器内“贴着底部”，而不是固定在视口底部，就该用 Flex 布局 + mt-auto。这是最常用也最可靠的居底方式，尤其适合卡片、模态框、登录页等场景。
前提是父容器必须启用 Flex 布局（d-flex flex-column），且高度可控（比如设 min-vh-100）。
- 父容器没设
height或min-height，mt-auto就没效果——因为没有“剩余空间”可撑 -
mt-auto是 margin-top 自动，不是 align-self；别和align-self-end混用 - 若父容器有 padding，子元素会紧贴 padding 区域，视觉上可能偏高，此时改用
mb-0+mt-auto组合更稳
<div class="d-flex flex-column min-vh-100"> <header>头部</header> <main class="flex-fill">主要内容</main> <footer class="mt-auto p-3 bg-light">底部内容</footer> </div>
避免踩坑：为什么 align-items-end 不起作用
很多人试过给父容器加 d-flex 和 align-items-end，结果子元素根本不动——因为 align-items 控制的是**交叉轴对齐**，而默认 flex-direction 是 row，交叉轴是垂直方向；但若父容器高度没约束，它就不会产生“对齐基准”。
真正起效的前提是：父容器必须有明确的高度（比如 h-100），且子元素不能自身撑高整个容器（否则没空间可对齐）。
- 用
align-items-end前，先确认父容器是否设置了h-100或min-vh-100 - 如果子元素用了
flex-fill或flex-grow-1，它会抢占全部空间，align-items-end就失效 - 更推荐用
mt-auto替代，语义更清晰，容错性更高
响应式居底要注意高度塌陷
在小屏幕下，内容变少，父容器高度收缩，mt-auto 或 align-items-end 就容易让底部“浮起来”，看起来像悬空。这不是 bug，是 Flex 行为本身——没足够空间就不撑。
解决思路不是强行加高度，而是分层控制：用 min-vh-100 保底，再配合 vh-100 在大屏强化，最后用媒体查询微调间距。
- 别用
vh-100在 iOS Safari 上——Safari 会把地址栏高度算进 vh，造成底部被截 - 移动端建议优先用
min-vh-100+pb-5预留安全距离 - 如果底部内容本身带交互（比如按钮），记得加
pb-safe（Bootstrap 5.3+）或手动补padding-bottom: env(safe-area-inset-bottom)
mt-auto + min-vh-100 这两个类。复杂点在于你得判断清楚：是要贴视口底，还是贴容器底；要不要响应式适配；以及有没有安全区或输入法遮挡问题。这些细节不写进 HTML，光靠类名是压不住的。 
