bootstrap 5 footer多栏布局应使用row+col-*响应式组合，按断点设列宽（如col-sm-6 col-md-3），社交图标用font awesome svg配合fs-5和text-center，链接列表用list-unstyled+mb-1，版权行需flex-column容器中结合min-vh-100、flex-grow-1与mt-auto实现可靠贴底。
Footer多栏布局用Bootstrap 5的grid系统最稳妥
Bootstrap 5移除了.row-cols-系列旧类，直接用row + col-* 组合就能实现响应式分栏，不需要额外写媒体查询。关键在于列数随断点动态变化：手机单列 → 平板双列 → 桌面三或四列。
常见错误是套用Bootstrap 4的col-md-4写法但没考虑col-sm-12兜底，导致小屏下内容挤成一列却撑不满宽度。正确做法是明确每个断点的列宽：
-
col-12：所有设备都占满一行（用于标题或版权行） -
col-sm-6 col-md-3：小屏两栏、中屏四栏（适合社交图标+链接混合区块） - 避免用
col-lg-2之类过窄列——文字可读性差，图标也容易点不准
社交图标必须用<svg></svg>或<i></i>配合fa-*类，别用img
用<img>加载社交图标在高DPI屏上会模糊，且无法统一配色或hover变色。Bootstrap本身不提供图标，得靠Font Awesome或自定义SVG。
推荐方案是引入Font Awesome CDN后，用<i class="fab fa-github"></i>，再配合Bootstrap的text-center和mb-2控制间距。注意两点：
- 图标容器必须设
display: inline-block（Bootstrap 5的text-center对inline元素才生效） - 别给
<i></i>直接加font-size——用fs-5这类响应式字号工具类，否则小屏下图标过大 - hover效果要加
text-decoration-none到父<a></a>，否则下划线会破坏图标排版
Footer内链列表用list-unstyled清空默认样式再重排
Bootstrap的list-unstyled会去掉margin、padding和项目符号，但保留语义结构。直接套用list-group反而增加多余边框和背景，不必要。
实际排版时，把链接用<li>包裹后，加mb-1控制行高，比手动写margin-bottom更可靠。示例结构：
注意：text-muted在深色Footer背景下可能不够显眼，需配合text-white或自定义CSS调整对比度。
版权行必须用mt-auto推到底部，别信fixed-bottom
很多人用fixed-bottom做版权栏，结果内容短时版权遮住正文，内容长时又悬空。真正可靠的方案是把Footer包在flex-column容器里，用mt-auto让版权行自动贴底。
典型结构：
<footer class="d-flex flex-column min-vh-100"><div class="flex-grow-1">...多栏内容...</div> <div class="mt-auto py-3 text-center text-muted">© 2024 XXX. All rights reserved.</div> </footer>
这里min-vh-100确保Footer至少占满视口，flex-grow-1撑开中间区域，mt-auto才是让版权沉底的关键。漏掉flex-grow-1的话，mt-auto就无效。
最后提醒：社交图标颜色别全用text-primary，不同平台有标准色（比如Twitter蓝、GitHub黑），硬套主题色反而降低识别度。
