小屏下footer多栏不垂直堆叠的根本原因是响应链断裂：row未正确包裹、container冗余嵌套或直接在footer上使用col类；须用container-fluid或row包裹最外层，禁用footer直接作栅格容器。
小屏下 Footer 多栏不垂直堆叠，根本原因不是类写错了，而是结构断了响应链——row 没包对、container 套多了、或者直接把 col 类丢在 footer 标签上。
必须用 container-fluid 或 row 包最外层
别把 footer 直接当栅格容器用。Bootstrap 的 col 类依赖父级 row 的负 margin 来抵消 padding，漏掉就会错位、换行失效。
-
container在 xs 下宽度为auto，但会加左右 padding，适合内容居中；container-fluid全宽 + 自带px-3，更适配页脚背景延伸 - 如果不想套容器，直接写
<footer class="row px-0"></footer>，px-0是必须的，否则小屏两侧留白 - 绝对不要写
<footer class="container"><div class="row">...</div></footer>——嵌套container会切断断点继承，xs 下col-sm-4就不生效
col-12 col-sm-4 不是可选，是必须写的组合
只写 col-sm-4，xs 下它还是占 1/3 宽度（因为没显式定义 xs 行为），结果三栏挤在窄屏里折行混乱甚至溢出。
-
col-12强制所有尺寸下默认单列，col-sm-4是覆盖规则：≥576px 才启用三等分 - 类名顺序不能颠倒：
col-sm-4 col-12会被浏览器忽略col-12，因为先匹配到sm就停了 - 如果某栏内容特别长（比如地址列表），单独加
flex-shrink-0，防止小屏堆叠时被压缩变形
别硬套 row/col，改用 d-flex flex-sm-column
Footer 内容语义独立（“关于我们”“联系方式”“法律条款”），比网格更适合用 Flex 控制流向。死守 col 类反而容易在小屏因高度不一致导致背景断裂、空白错位。
- 外层
<div class="d-flex flex-sm-column">，大屏默认 <code>flex-row，小屏切垂直 - 每栏内部统一用
<div class="d-flex flex-column gap-2">，比一堆 <code>mb-2更可靠，且gap在 flex 容器中才生效 - 避免同时加
justify-content-between和flex-sm-column——垂直主轴下between会撑开上下间距，造成意外空白 - 版权块用
<div class="mt-auto pt-3 text-center">，<code>mt-auto把它推到底部，pt-3防止贴边 - 社交按钮组单独抽出来，用
<div class="d-flex flex-wrap gap-2 justify-content-center">，<code>flex-wrap确保窄屏自动折行，不横向滚动 - 图标统一用
fs-5+text-center，别用float或position: absolute——小屏下这些会彻底失控
版权行必须脱离主 row 单独处理
版权文字（© 2026）和社交按钮混在同一 row 里，小屏堆叠后极易错位：图标飞出去、文字顶边、链接不可点。
真正卡住人的，往往不是类名拼错，而是检查时只盯着 col 类，却忽略了 row 外层有没有 container、footer 是否写了 width 或 margin: auto ——这些都会覆盖栅格计算逻辑，让响应式无声失效。
