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">... 却没在外层加 <code><div class="row">。结果：<code>col 的 padding 失效、左右间隙消失、小屏堆叠错位。Bootstrap 5 的栅格依赖 flex 容器行为，row 就是那个容器。
-
row提供display: flex和负 margin，抵消col的 padding - 漏掉
row后，col-md-4在中屏上仍占满一行，不是三栏 - 正确结构：外层
<footer></footer>→<div class="container"> → <code><div class="row"> → 若干 <code><div class="col-md-4"> <h3>社交图标该用 <code><img>还是<i></i>或<svg></svg>优先用内联
<svg></svg>，其次用 Bootstrap Icons 的<i class="bi bi-github"></i>，绝对不用<img src="...">加外部链接——高 DPI 屏模糊、加载失败留白块、颜色无法继承。-
<img>没法统一配色，hover 变色要靠 JS，且width/height在不同断点下难控制 - Font Awesome 的
fab fa-github需额外 CDN，且 v6+ 要启用fa-solid，旧写法已废弃 - 推荐写法：
@#@#@#@#@#@#@#@#@#@0 - 尺寸统一用
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，它们在内容短时盖住正文、内容长时悬空。- 给
加class="d-flex flex-column min-vh-100" - 给主内容区域（如
<main></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不是可选项，是可访问性底线。这两项漏掉，上线后可能被审计卡住。 -
