页脚容器应选container-fluid；col-*类名须按断点从大到小书写；每栏用flex-column+gap-2排版；版权行需脱离栅格单独粘底。
直接用 container-fluid + row + col-* 就能跑通，别套 container，也别手动写媒体查询。
页脚容器该用 container 还是 container-fluid？
选 container-fluid。它默认撑满视口宽度、自带左右 padding，小屏不缩窄、文字不挤成一团；而 container 在手机上会强制居中收缩，留白过大，看起来像塌了一半。
如果页脚要和上方主内容（比如用了 container）对齐宽度，可以改用 container，但必须同步加 px-0 清除左右内边距，否则断点切换时内容会跳。
绝对不要给 footer 元素设 width 或 max-width ——这会直接破坏栅格断点计算。
col-* 类名顺序写错，响应式就失效
Bootstrap 的 CSS 层叠规则决定了类名必须从大到小写，否则小屏断点会被覆盖。比如四栏布局，col-12 col-md-6 col-lg-3 是安全的；反过来写 col-lg-3 col-md-6 col-12，手机上照样四栏挤在一起。
- 移动端（≤576px）强制单栏：
col-12 - 平板横屏（≥576px）双栏更稳妥：
col-sm-6（比col-md-6更早触发，适配 iPad mini 等窄屏） - 桌面端（≥992px）再升四栏：
col-lg-3；栏目极简时可用col-lg-2六栏
漏掉 row 是常见错误：只写 col-12 不包在 row 里，栅格上下文没激活，所有列全堆左边，右侧大片空白。
每栏内部怎么排版才不崩？
别靠 margin-bottom 拉链接间距，小屏堆叠后各栏高度不一致，空洞明显。正确做法是每栏用 flex-column + gap-2 控制垂直间距 —— 它不受字体缩放、行高变化影响，稳定性远高于手动设 margin。
链接列表保留原生 ul 结构，只加 mb-0 和 fw-normal，别用 list-unstyled：后者清除了语义，屏幕阅读器读不出导航层级，小屏堆叠后还暴露结构缺陷。
表单控件（如 input、button）默认是 inline-block，小屏易错位 → 统一加 w-100 占满栏宽；长地址或链接加 text-wrap 防溢出。
版权行怎么粘底又不翻车？
版权行必须脱离多栏栅格，单独放在 footer 底部。用 mt-auto + pt-3 实现粘底，别塞进 row 里 —— mt-auto 在 Flex 布局里靠的是剩余空间分配，中屏高度变化时极易失灵；若只是想让版权文字和 logo 垂直居中并排，就用 align-items-center 配合 row。
版权文字别用 text-truncate：它对块级元素无效。改用 <small class="text-muted d-block text-center">，语义清晰、小屏下不顶边、也不截断关键信息。
真正难的不是分栏数量，而是某栏含表单、另一栏纯链接时，小屏堆叠后高度差拉出大片空白 —— 这时候删掉多余 <br> 和空 <div>，往往比写 JS 补高度更管用。
