bootstrap 5用.row+.col-*实现footer多栏布局最稳妥，col-md-4中屏占1/3、小屏堆叠，版权区建议col-12 col-md-6避免文字折行。
footer多栏布局用bootstrap 5的grid系统最稳妥
直接用 .row + .col-* 类即可实现响应式分栏，不需要额外写媒体查询。bootstrap 5默认启用flex grid，col-md-4 在中屏及以上占1/3，小屏自动堆叠成单列——这正是版权信息+分享按钮需要的断点行为。
常见错误是套用旧版 col-sm-6 col-md-3 导致小屏内容过窄、文字折行难读；实际版权文字区域建议从 col-12 col-md-6 起步，留给分享按钮足够空间。
-
col-12：超小屏（ -
col-sm-6：小屏（≥576px）两栏并排，适合“版权文字”和“分享按钮”分离 -
col-lg-4：大屏（≥992px）三栏，可拆出“友情链接”或“联系方式”独立区块
分享按钮用包裹SVG图标比用button更语义且易适配
很多开发者用 <button></button> 包裹分享图标，结果在Footer里触发默认聚焦轮廓、干扰视觉节奏；而 <a href="https://www.php.cn/link/3ce434b95c3392cc0562fb8ac2e6a2ee"></a> 天然支持 target="_blank" 和 rel="noopener"，也更容易通过 text-decoration: none 控制下划线。
图标建议内联SVG而非字体图标：避免加载失败导致空白方块，且能直接用 fill 控制颜色。例如微信图标用 <svg fill="#00bb2d">...</svg>，比 <i class="fab fa-weixin"></i> 更可控。
- 所有分享链接必须加
rel="noopener noreferrer"防安全漏洞 - 图标尺寸统一用
width: 1.5rem; height: 1.5rem;，配合col的padding自动对齐 - 避免在
<a></a>上设display: block—— 默认 inline 已满足点击热区，加block反而破坏文字基线对齐
版权文字区域需注意
标签嵌套和line-height一致性
很多人把整段版权文字（含年份、公司名、备案号）塞进一个 <p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap"><img
src="https://img.php.cn/upload/skill/000/000/081/179025304626966.jpg" alt="VPS Bootstrap" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="overflowclass">VPS Bootstrap</a>
<p class="overflowclass">从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4914" title="VPS Bootstrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>，结果在移动端因 margin-bottom 过大撑开间距。正确做法是用 <p class="mb-0"></p> 清除默认下边距，再用 <small></small> 或 <span></span> 包裹备案号等次要信息。
关键细节：<footer></footer> 默认是 display: block，但若父容器用了 container-fluid 且没设 pt-5 pb-3 类，底部会紧贴内容——务必手动加 py-4 或类似垂直内边距。
- 年份动态更新别硬编码：服务端渲染时用
<span id="year">2024</span>+ 一行JSdocument.getElementById('year').textContent = new Date().getFullYear() - 备案号链接必须可访问，且目标页面要带
rel="noopener"，否则审计可能不通过 - 避免在版权文字中混用
<br>换行——用col分栏或flex-column更可靠
IE11兼容性问题：flex布局降级方案要提前验证
如果项目仍需支持IE11，col-* 类在部分旧版Bootstrap 4.6中会失效，表现为所有栏目堆叠或错位。不是改用 float-left 就能解决——Bootstrap 4.6已弃用float grid，必须回退到 flexbox: false 编译选项，或手动引入 bootstrap-grid-only.css 并补全 col-*-n 的float规则。
更现实的做法是检测用户UA，对IE11返回简化版Footer：单列排布 + 去掉SVG图标（改用PNG sprite），分享按钮用文字链替代。这类逻辑放在模板层比CSS hack更稳定。
- 不要依赖
@supports (display: flex)做渐进增强——IE11完全忽略该规则 - 检查
col类是否被其他CSS覆盖：比如全局设置了* { box-sizing: border-box; }却漏了html元素，会导致IE11计算宽度异常 - 如果用Webpack，确认
postcss-loader启用了autoprefixer且browserslist包含ie 11
实际排版复杂度不在栅格本身，而在文字长度不可控、图标尺寸不一致、第三方链接状态未知——这些才是上线前必须真机测三遍的地方。
