Footer应使用container包裹，内部用row+col实现响应式布局，移动端默认竖排、中大屏用col-md-4等分栏，避免多层container撑破视口；文字、社交、版权分三列，小屏自动堆叠，用pt-5 pb-4控内边距，禁用固定高度；社交图标用Bootstrap Icons CDN引入，搭配btn btn-sm rounded-circle和text-decoration-none；中文段落用text-break防溢出；Sticky Footer需body设d-flex flex-column min-vh-100，main加flex-grow-1。
Footer怎么用Bootstrap 5的栅格和工具类实现响应式布局
直接用 container 包裹，内部用 row + col 控制列宽，别套多层 container——否则在小屏下容易撑破视口。移动端优先，所以默认设为竖排，中大屏再用 col-md-4 或 col-lg-3 分栏。注意 col 必须放在 row 内，否则 margin/padding 错乱。
- 文字区块、社交按钮、版权信息建议分三列（
col-md-4），小屏自动堆叠 - 避免对
footer设固定高度，改用pt-5 pb-4控制上下内边距更安全 - 如果用了
fixed-bottom，记得给body加pb-5防止内容被遮挡
社交图标按钮怎么用Bootstrap Icons且不引入额外CSS
Bootstrap 5.3+ 自带 bootstrap-icons，直接通过 CDN 引入即可用 <i class="bi bi-github"></i>。别用 Font Awesome，除非项目已全局依赖——否则多加载一个字体库会拖慢首屏。
- 图标尺寸统一用
fs-5（对应 0.875rem），比text-lg更可控 - 按钮必须加
btn btn-sm和rounded-circle，否则圆角和点击区域不一致 - 链接需设
text-decoration-none，否则下划线在小屏上挤占空间 - 图标色别硬写
style="color: #xxx"，改用text-dark或text-muted保持主题一致性
文字排版怎么避免小屏下文字溢出或换行错乱
中文段落最常踩的坑是没设 text-wrap 或误用 text-truncate。Bootstrap 5 的 text-break 才是正确选择——它强制在长单词/URL处换行，而 text-truncate 会截断并加省略号，不适合地址、邮箱这类需要完整显示的内容。
- 联系信息用
address标签语义化，配合mb-0去掉默认下边距 - 超长邮箱或电话用
text-break，别用word-break: break-all手动写 CSS - 版权声明右对齐用
text-md-end，而不是text-right（后者已废弃） - 行高统一用
lh-sm（1.25），避免小屏下文字贴得太紧
如何让Footer在内容少时仍撑满视口底部（Sticky Footer）
这不是 Bootstrap 内置功能，得靠 Flexbox 实现。把 body 设为 d-flex flex-column min-vh-100，再给 main 加 flex-grow-1，Footer 自然沉底。别用 position: absolute 或 JS 计算高度——兼容性和维护性都差。
-
main标签必须存在且包裹全部主体内容，否则flex-grow-1无效 - 如果用了
navbar-fixed-top，要给main加pt-5避免被遮挡 - 某些 CMS 输出的
footer可能被包裹在其他 div 里，得确认最终渲染的 DOM 结构是否满足 flex 布局链路
真正麻烦的是第三方插件注入的脚本可能重写 body 样式，或者自定义 CSS 覆盖了 min-vh-100。上线前务必在真机小屏下滚动测试底部是否始终可见。
