页脚分栏结构推荐使用 container 而非 container-fluid；container 在小屏自动收缩留白、中大屏铺满，配合 px-3 保持呼吸感，全宽背景色通过 footer 设 bg-light + 内嵌 container 实现。
页脚分栏结构用 container 还是 container-fluid？
响应式页脚的宽度控制，关键在容器选择。用 container 会让分栏在小屏下自动收缩、留白，中大屏才铺满；而 container-fluid 始终贴边，但小屏时文字和链接容易挤成一团。实际项目中更推荐 container，配合 px-3（而非默认 px-0）保留呼吸感。若需全宽背景色，直接给 footer 设 bg-light，再内部嵌套 container——这样视觉上“全宽”，内容仍居中可控。
用 row + col 实现多栏布局，但小屏要堆叠
Bootstrap 的栅格系统天然支持响应式断点，页脚分栏不需要额外写媒体查询。典型做法是：
- 4 栏（如“产品”“资源”“公司”“订阅”）在桌面端用
col-lg-3 - 平板端（
md）收为 2 栏，用col-md-6 - 手机端（
sm）强制单栏，加col-12
注意：必须按从大到小顺序写 class，否则小屏断点可能被覆盖。例如col-12 col-md-6 col-lg-3是安全的，反过来则失效。
链接列表样式不统一？别动 list-unstyled，改用 mb-0 和 fw-normal
页脚链接常被误加 list-unstyled 后再手动调 margin，结果在不同断点下间距错乱。正确方式是保留默认 ul 结构，只加：
-
mb-0去掉底部外边距（避免与下一分栏粘连） -
fw-normal防止继承导航栏的粗体 - 每个
a加text-decoration-none和text-muted控制颜色与下划线
不要给ul设padding-left: 0，Bootstrap 5 的ps-0更语义化且兼容 RTL。
订阅表单或版权行怎么对齐？用 align-items-center 而非 mt-auto
页脚底部版权行常被塞进 mt-auto 试图“推到底部”，但在 Flex 布局里这会导致中屏下内容错位。更稳的方案是把整个 footer 设为 d-flex flex-column min-vh-100，然后用 justify-content-between 分隔主内容与版权行。如果只是想让版权文字垂直居中（比如和 logo 并排），就用 align-items-center 配合 row，别碰 mt 类——它在响应式高度变化时极易失灵。
页脚真正难的不是分栏数量，而是各栏内元素高度不一致时，col 的等高行为在小屏堆叠后反而暴露了内容空洞。这时候得靠 data-bs-spy="scroll" 或 JS 补齐高度，但多数情况，删掉多余 br 和空 div 就能解决。
