Bootstrap 5 最稳的 Footer 布局需外层加 row 容器以激活栅格 flex 行为，社交图标优先用内联 SVG 或 Bootstrap Icons，小屏对齐用 d-flex + justify-content-center，版权行用 mt-auto 贴底且独立于多栏结构。
直接用 row + col-* 实现多栏，别套浮动、别写媒体查询、别用 fixed-bottom —— 这是 Bootstrap 5 里最稳的 Footer 布局方式。
为什么必须包 row 才能用 col-md-4
常见错误是直接写 <div class="col-md-4">... 却没在外层加 <div class="row">。结果：col 的 padding 失效、左右间隙消失、小屏堆叠错位。Bootstrap 5 的栅格依赖 flex 容器行为，row 就是那个容器。
-
row提供display: flex和负 margin，抵消col的 padding - 漏掉
row后，col-md-4在中屏上仍占满一行，不是三栏 - 正确结构：外层
<footer>→<div class="container">→<div class="row">→ 若干<div class="col-md-4">
社交图标该用 <img> 还是 <i> 或 <svg>
优先用内联 <svg>，其次用 Bootstrap Icons 的 <i class="bi bi-github">，绝对不用 <img src="..."> 加外部链接——高 DPI 屏模糊、加载失败留白块、颜色无法继承。
-
<img>没法统一配色，hover 变色要靠 JS，且width/height在不同断点下难控制 - Font Awesome 的
fab fa-github需额外 CDN，且 v6+ 要启用fa-solid，旧写法已废弃 - 推荐写法：
<a href="..." aria-label="Follow us on GitHub"><svg width="24" height="24" fill="currentColor">...</svg></a> - 尺寸统一用
width="24"+height="24"，配合fs-5控制文字流中的基线对齐
小屏下社交图标挤成一列还左对齐？怎么修复
根本原因是没重置 a 默认样式，也没约束父容器对齐方式。图标本身是 inline 元素，但周围默认有 text-decoration 和 padding，导致热区错乱、视觉偏移。
- 给所有社交链接父容器加
class="d-flex flex-wrap justify-content-center gap-3"（Bootstrap 5.2+） - 移除
a上的text-decoration：加text-decoration-none - 别在
svg上设display: block—— 会破坏 inline 基线，点击热区变窄 - 检查是否误加了
table-responsive—— Footer 不是表格，加了会引入横向滚动
版权行怎么贴底又不遮正文
用 mt-auto 推到底部，前提是整个页面结构是 flex column。别信 fixed-bottom 或 position: absolute，它们在内容短时盖住正文、内容长时悬空。
- 给
<body>加class="d-flex flex-column min-vh-100" - 给主内容区域（如
<main>）加class="flex-grow-1" - 版权行单独放一层，不要塞进多栏
row里，用<div class="col-12 pt-4 text-center">© 2026 ...</div>+mt-auto - 避免在
footer上设固定height，改用py-5控制内边距更安全
最容易被忽略的是：所有社交链接必须带 rel="noopener noreferrer"，尤其 target="_blank" 时；还有 aria-label 不是可选项，是可访问性底线。这两项漏掉，上线后可能被审计卡住。
