优先选 sticky-bottom，因其不脱离文档流、不遮内容、软键盘弹出时随页面抬升；fixed-bottom 在 iOS Safari 和多数 Android 浏览器中易悬空或挤出视口，且需手动处理 padding-bottom 和 viewport 变化。
用 sticky-bottom 还是 fixed-bottom？
优先选 sticky-bottom，不是因为它新，而是它不脱离文档流、不遮内容、软键盘弹出时不会被顶飞；fixed-bottom 在 iOS Safari 和多数 Android 浏览器里，只要页面里有 <input> 或 <textarea>，聚焦后导航栏大概率悬空或挤出视口——这不是你代码写错，是浏览器 viewport 行为导致的。
sticky-bottom 本质是 position: sticky; bottom: 0，仍属文档流，页面重排（比如软键盘弹出）会把它一起抬升；而 fixed-bottom 必须手动为 <main> 或外层容器加 pb-5 防遮盖，且这个值不能靠 JS 动态算——软键盘高度不可靠，resize 事件在 iOS 上常延迟或不触发。
- 必须确保
sticky-bottom元素是其父容器的最后一个子元素，否则“粘不住” - 父容器需有明确高度或可滚动区域，推荐用
<div class="d-flex flex-column min-vh-100">包裹整个页面结构 - iOS 15.4 之前对
position: sticky支持不稳定，尤其直接作用于<main>或<section>时，真机测试不可跳过
备案栏高度与内容区留白怎么配？
用 fixed-bottom 时，备案栏高度必须显式声明（比如 height: 40px），并在 <body> 或主容器上加匹配的 padding-bottom（如 pb-5 对应 3rem）。别指望 margin-bottom —— 它对 fixed 元素无效，且响应式下容易错位。
用 sticky-bottom 则无此问题，但若父容器高度不足（比如内容太短），它会退化为普通定位，落在内容末尾而非视口底部。此时可加 mt-auto 或包裹一层 flex-column h-100 强制撑高。
-
pb-5比像素值更可靠，保证响应式一致性 - 备案栏含多行文本或动态字号时，用
pb-xxl-5或自定义 CSS 变量控制留白 - 别给
sticky-bottom元素设过高z-index，否则可能压住offcanvas或modal的关闭按钮
备案信息怎么响应式排版才不折行错乱？
备案号在小屏上容易因宽度不足强行折行，导致文字错位、间距失控。纯靠 col 布局容易漏断点适配，Bootstrap 的响应式工具类更稳。
别用 <div class="row"><div class="col-md-6"> 这种写法——手机上 col-md-6 不生效，实际退化为 block，若父级没清浮动或没设 flex-direction: column，内容可能因 margin/padding 错位。
- 用
d-flex flex-column flex-md-row justify-content-between实现小屏堆叠、大屏左右对齐 - 文字用
<small>包裹，默认已缩小，再缩易低于 12px，影响合规性 - 链接和文字分拆：
<small class="d-block d-sm-inline">© 2024 公司名称</small><small class="d-block d-sm-inline ms-sm-2">京ICP备12345678号</small> - 长文本加
text-wrap: wrap（Bootstrap 5.3+）或降级用word-break: break-word，避免横向滚动
为什么备案栏一缩放就错位或遮挡内容？
常见原因是直接用 position: fixed 但没处理好与页面主体的垂直间距，导致内容被遮住；或者用了 bottom: 0 却忽略了移动端键盘弹出、iOS Safari 地址栏滚动时的 viewport 变化。Bootstrap 默认不提供“固定底部备案栏”组件，得自己组合布局逻辑。
别用 .fixed-bottom 直接套备案文字——它只做定位，不管高度预留，正文会从底下“长出来”。备案栏高度必须显式声明，并在 <body> 或主容器上加 padding-bottom 补齐。
-
fixed-bottom的z-index是 1030，确保没被其他组件（如 modal）盖住 - 确保
<meta name="viewport" content="width=device-width, initial-scale=1">存在，且不含height=device-height这类干扰项 - Chrome DevTools 的设备模拟器不会触发真实软键盘行为，页面在模拟器中看起来正常，一到真机就发现错位——真机测试比模拟器更重要
