用bootstrap 5的.row+.col-*实现footer多栏布局最稳妥，配合.container居中、bootstrap icons图标、text-muted与text-reset统一颜色、d-flex对齐文字与链接，并需真机验证响应式效果。
Footer多栏布局用Bootstrap 5的grid系统最稳妥
直接用 .row + .col-* 是最轻量、兼容性最好、也最不容易被自定义样式破坏的方式。别碰 flex-column 或 float，那些在小屏下容易错位或撑破容器。
- 在
<footer></footer>内部套一层<div class="container">，保证内容居中且有左右边距 <li>用 <code><div class="row"> 包裹所有栏目，列数按内容密度选：版权信息放 <code>.col-md-6，链接列表用.col-md-3，分享图标用.col-md-3 - 小屏（
xs）下自动堆叠成单列，不用额外写@media—— Bootstrap 的col-12默认行为已覆盖 - 在
加：<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet"> - 每个分享链接写成：
@#@#@#@#@#@#@#@#@#@1 - 加
aria-label不仅利于无障碍，还能避免图标缺失时显示空链接 - 图标颜色统一用
text-muted，比手写color: #6c757d更可靠，且随主题变色 - 把版权区域整体包进
<div class="d-flex flex-wrap align-items-center justify-content-between"> <li>文字部分用 <code><small class="text-muted"></small>，链接用<small class="text-muted">@#@#@#@#@#@#@#@#@#@3</small> -
text-reset关键：它重置链接颜色为继承值，避免a标签自带的蓝色破坏灰度一致性 - 别用
line-height: 1强制拉平——会压扁图标和小写字母，用align-items-center才真正对齐中线 - 真机测试至少覆盖：iPhone SE（375px）、iPad mini（768px）、Pixel 5（412px）
- 重点检查：分享图标是否清晰（SVG 无缩放失真）、链接间距是否足够手指点击（
min-width: 44px; min-height: 44px是 iOS 最低触控标准） - 如果用了
col-lg-2这类大屏分栏，在 iPad 竖屏（768px）下可能仍显示三栏，但内容挤在一起——这时应改用col-lg-3 col-xl-2，让 XL 屏才细分
分享链接图标用Bootstrap Icons最省事
别自己引入 Font Awesome 或 SVG sprite，加载慢、版本易冲突。Bootstrap Icons 是官方维护、CDN 可直链、且支持按需引入 SVG 元素。
版权文字和链接混排时注意行高与垂直对齐
常见错误是把 © 2024 MySite 和 @#@#@#@#@#@#@#@#@#@2 直接并列写，结果在 Safari 或 iOS 上文字基线不齐，看起来像“飘”着。
响应式断点要验证实际设备表现，不是只看浏览器缩放
Chrome DevTools 的 “Responsive” 模式会模拟 viewport 宽度，但不会触发真实设备的 DPR（设备像素比）和触摸事件逻辑，导致某些图标模糊或点击热区偏移。
最常被忽略的是字体大小层级：小屏下 small 文字可能太小，建议在 @media (max-width: 576px) 里给 footer small 单独设 font-size: 0.875rem，否则老人或弱视用户根本看不清版权声明。
