Bootstrap 5 多栏 Footer 应用响应式栅格：手机 col-12 单列、平板 col-sm-6 两栏、桌面 col-lg-3 四栏；社交图标用内联 SVG 替代 Font Awesome，加 aria-label 和 fill 变量适配深色模式；版权栏独立于网格，用 col-12 text-center small 避免断行。
用 Bootstrap 5 的 grid 实现多栏 Footer 布局
Bootstrap 5 默认不带预设的 Footer 组件，得靠 container + row + col 手动搭。关键不是“怎么加栏”，而是“栏在不同断点如何合理分列”——小屏堆叠、中屏两栏、大屏三到四栏最实用。
常见错误是直接写 col-3 四次，结果在手机上也强行四列，内容挤成一条细线。正确做法是按断点指定：比如 col-12 col-md-6 col-lg-3，表示手机占满、平板两栏、桌面四栏。
-
col-12：所有设备默认单列（防移动端错乱） -
col-sm-6：≥576px 开始两栏（适合小平板） -
col-lg-3：≥992px 四栏（版权、联系方式、快速链接、社交图标各一栏） - 避免用
col-xl单独控制超大屏，多数 Footer 内容没那么多信息量，反而导致空隙过大
社交图标用 SVG 而非 Font Awesome 的 class 方式
Font Awesome 的 fa-facebook 这类 class 在 Bootstrap 5 中容易和自定义 CSS 冲突，且加载慢、图标尺寸难统一。更稳的方式是直接嵌入内联 SVG，可控性强，还能用 fill 动态改色。
例如微信图标不能只靠 class 模拟，得用真实 SVG path；否则在深色模式或高对比度下可能不可见。另外，所有图标链接必须加 aria-label，否则无障碍访问会失败。
- 每个图标用
<svg>标签包裹，width="24"和height="24"保持一致 - 父容器加
class="d-flex gap-2"（Bootstrap 5.2+）或class="d-flex"+ 自定义margin-right控制间距 - 链接 href 必须是完整 URL（如
https://twitter.com/xxx），不能是/twitter，否则跳转 404 - 别用
<i>标签套 icon font —— 现代项目里字体图标已成性能累赘
版权信息栏需单独处理文字对齐与响应式截断
版权行（如 “© 2024 MySite. All rights reserved.”）常被塞进 col 里跟着其他栏一起换行，结果小屏上出现“© 2024 MySite.
All rights reserved.”这种奇怪断行。它本质是横跨全宽的声明，不该参与多栏网格流。
正确做法是把它放在 row 底部，用 col-12 text-center py-3 独立一行，并加 small 类缩小字号。如果公司名很长，小屏需强制单行不换行，得加 text-nowrap + overflow-hidden text-ellipsis。
- 版权栏不要和其他功能栏写在同一
row里，否则 flex 布局下易被拉伸变形 - 避免用
float: right对齐年份——Bootstrap 5 已弃用 float 布局，该用ms-auto或justify-content-between - 如果支持多语言，版权文字需包裹
lang属性，如<p lang="zh">© 2024</p>
深色模式下 SVG 图标和文字颜色适配要点
Bootstrap 5.3+ 原生支持 data-bs-theme="dark"，但默认不会自动反转 SVG fill 或文字颜色。如果你在 light 模式下设了 fill="#333"，到了 dark 模式下依然黑乎乎一团，跟背景混在一起。
解决方式不是写两套 SVG，而是用 CSS 变量驱动 fill 颜色，并监听 prefers-color-scheme。Bootstrap 的 --bs-body-color 在 dark 模式下会变浅，可直接复用。
- 给 SVG 加 class 如
social-icon，然后写 CSS：.social-icon { fill: var(--bs-body-color); } - 不要用
color: #fff硬编码，否则暗色模式下图标消失 - 测试时手动切系统深色模式（macOS 设置 → 通用 → 外观），别只信浏览器 DevTools 的模拟开关
- 版权声明文字若用了
text-muted，在 dark 模式下可能太淡，建议改用text-secondary更稳
真正麻烦的不是写几行 grid 或贴几个 SVG，而是让每栏内容在窄屏下可读、图标在暗色下可见、版权年份不被截断——这些细节不测真机、不切深色模式，上线前根本发现不了。
