Footer外层结构应根据需求选择container或container-fluid：全宽背景用container-fluid，与正文对齐则用container加px-0；切忌手动设width/max-width、position:fixed或嵌套container。
Footer外层结构该用 container 还是 container-fluid？
直接用 container-fluid 最省心，尤其当 Footer 要撑满视口宽度、且内容不需与上方正文对齐时。如果正文用了 container，而你又希望 Footer 的左右边距和正文一致，那就用 container + px-0 清除默认 padding —— 别套两层 container，否则小屏下栏宽不缩、表单按钮被压扁。
常见错误是给 footer 元素手动加 width: 100% 或 max-width: 1200px，这会覆盖 Bootstrap 栅格的断点计算逻辑，导致 col-sm-6 在 iPad 上失效。
-
container-fluid：适合全宽背景色/图，自动适配所有断点 -
container+px-0：适合与正文对齐，但必须确保内部row不再额外嵌套container - 绝对不要在
footer上设position: fixed或bottom: 0—— 订阅表单可能被截断，小屏键盘弹出后提交按钮消失
订阅表单和社交链接怎么分栏才不挤成一团？
别用固定列数硬切，按内容密度动态分配：订阅表单单独占一栏（col-12 col-md-5），社交链接放另一栏（col-12 col-md-4），剩下留白或放“关于我们”类导航（col-12 col-md-3）。总和必须是 12，否则最后一栏掉到下一行。
小屏下堆叠靠的是 Bootstrap 的断点优先级：类名顺序必须是 col-12 col-md-5 col-lg-4，而不是反过来写 —— 否则浏览器先匹配 col-lg-4，col-md-5 和 col-12 就被忽略。
- 表单栏内用
d-flex flex-column gap-2控制输入框、按钮间距，比一堆mb-2更可靠 - 输入框和按钮统一加
w-100，防止小屏下宽度失控 - 社交链接组用
d-flex flex-wrap justify-content-center gap-3，避免图标横向溢出或挤成一条线 - 别给
a标签设display: block—— 默认 inline 已满足点击热区，加 block 会破坏图标与文字基线对齐
社交链接必须带 rel="noopener noreferrer" 吗？
必须。只要链接目标是 target="_blank"，就必须加 rel="noopener noreferrer"，否则存在安全风险：新开页面可通过 window.opener 反向控制原页面，篡改 URL 或执行脚本。
图标建议用 inline SVG 而非 Font Awesome：bi bi-github 这类 Bootstrap Icons 在新项目里够用，但颜色是灰色；若需品牌色（如 Twitter 蓝、WeChat 绿），得自己内联 SVG 并设 fill="currentColor"，再配合 text-primary 统一变色。
- 每个社交链接必须包裹在语义化
a标签里，不能只放i或svg -
aria-label不可省略，例如aria-label="关注我们的 GitHub 仓库"，否则屏幕阅读器无法识别用途 - 图标尺寸统一用
fs-5，别用font-size: 1.25rem—— 响应式断点里它不会自动缩放
版权行怎么贴底又不遮挡订阅表单？
把整个 footer 设为 d-flex flex-column min-vh-100，内部用 flex-grow-1 包住多栏内容，版权行单独放最后并加 mt-auto pt-4 text-center。这样无论内容长短，版权都稳稳贴在视口底部，不会悬空也不会遮住表单。
别信 fixed-bottom 或 position: absolute —— 订阅表单提交后页面滚动、小屏键盘弹起时，版权会盖住“提交成功”提示。
- 版权行必须脱离
row，单独作为footer的最后一个子元素 - 年份用 JS 动态注入更稳妥：
© <span id="year">2026</span>+document.getElementById('year').textContent = new Date().getFullYear() - 如果用了深色背景，
text-muted可能看不清，直接上text-white或自定义 CSS 调对比度
scroll-margin-top: 80px，让滚动后留出足够空间。 
