Bootstrap怎么实现响应式的底部备案信息固定栏-Bootstrap教程-PHP中文网

底部备案栏被顶上去是因为footer未脱离文档流，应使用position: fixed + bottom: 0 + left: 0 + width: 100%并设z-index；主内容需加pb-5等内边距防遮挡；移动端用d-block d-sm-inline实现换行与并排，字号勿低于12px。

底部备案栏为什么总被内容顶上去？

因为默认的 footer 没有脱离文档流或高度约束，页面内容一长，它就被挤到可视区下方。固定在视口底部（不是页面底）要用 position: fixed，但得避开 footer 被遮挡、滚动时闪动、移动端适配错位这些坑。

用 `fixed` + `bottom: 0` 的基础写法

直接加样式最简单，但必须配合 z-index 和 width: 100%，否则在窄屏下会溢出或层级错乱：

<footer class="fixed-bottom text-center py-2 bg-light text-muted"><small>© 2024 公司名称 | 京ICP备12345678号</small>
</footer>

Bootstrap 5 自带 fixed-bottom 工具类，它等价于：position: fixed; bottom: 0; right: 0; left: 0;。别漏掉 left: 0 —— 否则在某些安卓 WebView 下右侧留白。

如何避免内容被 footer 遮住？

固定定位会让 footer 浮在内容上层，所以主内容区域得预留足够底部内边距（pb），否则文字会被盖住：

主容器（比如或 ）加 pb-5（对应 2rem）或更大值
如果 footer 高度动态（比如多行文本、响应式字号），用 pb-xxl-5 或自定义 CSS 变量控制


不要依赖 margin-bottom，它对 fixed 元素无效
移动端备案信息换行和字号怎么调？
备案号在小屏上容易折行错乱，用 Bootstrap 的响应式文字工具类比写 media query 更稳：

											
												
												
													VPS Bootstrap
													从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
												
												下载
												
											
										
<small class="d-block d-sm-inline">© 2024 公司名称</small>
<small class="d-block d-sm-inline ms-sm-2">京ICP备12345678号</small>
关键点：


d-block 在 xs 上独占一行，d-sm-inline 在 sm+ 屏并排显示

ms-sm-2 控制横向间距，避免紧凑粘连
字号不用额外设 fs-xs ——  默认已缩小，再缩易看不清

备案信息本身不能省略或截断，字体大小低于 12px 会影响合规性，别为了“美观”压得太小。