sticky-bottom是唯一靠谱的选择，因其本质为position: sticky; bottom: 0，属文档流、不遮内容、不被软键盘顶飞；需父容器有明确高度（如min-vh-100+d-flex flex-column）、元素为最后一个子元素、避免overflow-y: hidden，且iOS 15.4前须真机测试。
用 sticky-bottom，不是 fixed-bottom——后者在 iOS Safari 和多数 Android 浏览器里， 一聚焦，软键盘弹出，菜单就悬空或被挤出视口，这不是你代码错了，是浏览器 viewport 行为导致的。
为什么 sticky-bottom 是唯一靠谱的选择
sticky-bottom 本质是 position: sticky; bottom: 0，它仍属文档流，滚动时“粘”底，但不会遮内容、不会被软键盘顶飞。而 fixed-bottom 在 Bootstrap 5.3+ 中已被移除，即使强行加 class 也无效。
- 必须满足三个硬条件：父容器有明确高度（推荐
min-vh-100+d-flex flex-column）、sticky-bottom元素是父容器的最后一个子元素、父容器不能有overflow-y: hidden - iOS 15.4 之前对
position: sticky支持不稳定，<main></main>或直接用大概率失效，真机测试不可跳过 - 别给它加
z-index过高，否则会压住offcanvas或modal的关闭按钮
图标+文字怎么对齐又响应式
常见错误是直接写 <i class="fas fa-home"></i> 首页，结果图标上浮、点击区域小、小屏堆叠错位——根本原因是 inline 元素 baseline 对齐问题。
- 图标必须包裹在
<a>或<button>内，否则语义缺失、无障碍失效、触摸反馈丢失 - 统一用
fs-4控制图标大小（Bootstrap 5.3+），避免混用text-lg、h5导致高度不一致 - Font Awesome 图标加
fa-fw类（固定宽度），防止不同图标宽度差异导致对齐晃动 -
.list-group-item内设display: flex; align-items: center; justify-content: center;，再重置内边距：padding: 0.75rem 0;
小屏下如何自动隐藏文字、只留图标
响应式不是靠 JS 动态删 DOM，而是用 CSS 媒体查询控制显隐和布局流。关键点：文字必须用 <span> 包裹，不能直接写在 <a> 里。
- 默认横排显示图标+文字；
@media (max-width: 576px)时隐藏span、增大图标尺寸（如font-size: 1.5rem）、设flex-direction: column竖排（更适配拇指操作） - 别用
col-2栅格硬压宽度——内容溢出时不会自动隐藏，得配text-truncate或overflow: hidden - 文字隐藏后，图标间距收紧（如
margin-bottom: 0.25rem），避免竖排时松散
最容易被忽略的是父容器结构：没包 min-vh-100、没设 d-flex flex-column、sticky-bottom 元素不是最后一个子元素——这三者缺一，sticky-bottom 就彻底失效，连报错都不会有。
