Footer小屏多栏不垂直堆叠的根本原因是未显式设置xs断点宽度（如col-12）或结构未切断水平流；Bootstrap的col-md-*在xs下无效，需用col-12或d-flex flex-sm-column实现堆叠。
小屏下 Footer 多栏不垂直堆叠，根本原因不是栅格失效，而是结构没切断水平流或断点类没写全——col-12 col-md-4 比 col-md-4 多写的那三个字母，就是垂直堆叠和挤成一排的区别。
为什么加了 col-md-4 小屏还是横着排？
因为 Bootstrap 5 的 col-md-* 只在 ≥768px 生效，xs/sm 下默认行为是「不指定宽度」，但父容器 row 仍保持 display: flex + flex-direction: row，子项没强制宽度就会被压缩并强行横排。
-
col-md-4在 xs 下等价于无宽度约束，浏览器按内容最小宽度撑开，三栏挤在一行 - 必须显式写
col-12，让 xs 断点下每个栏都占满整行宽度 - 漏掉
row或把col-*直接丢进footer标签里，row的负 margin 就失效，列宽计算全乱
用 d-flex flex-sm-column 替代 row/col 更干净？
对语义清晰、栏目数固定（如「关于我们」「联系方式」「法律条款」）的 Footer，d-flex 确实更轻量、更可控——它不依赖栅格的 padding/margin 抵消逻辑，也不怕内容高度不一致导致背景断裂。
- 大屏：
d-flex justify-content-between左右分置 logo 和版权，中间导航居中 - 小屏：
flex-sm-column align-items-start，同时必须去掉justify-content-between（垂直主轴下 between = 上下撑开，不是你想要的紧凑堆叠） - 中间多栏部分单独抽成一个
div，加d-flex flex-sm-column gap-2，避免影响左右区块的响应节奏 - 别给这个
div设width或max-width，Flex 容器靠内容自适应才稳定
container 还是 container-fluid？
选 container-fluid 是最省心的起点；如果正文用了 container，Footer 也想对齐，就得手动清除内边距，而不是套两层 container。
-
container-fluid自带左右padding，所有断点都生效，不会因嵌套导致响应链断裂 - 用
container时，必须加px-0清除左右内边距，否则小屏下两侧留白过大 - 绝对别在
footer上写width: 100%或margin: 0 auto，会覆盖 Bootstrap 的断点宽度计算 - 测试时直接用 DevTools 切到 iPhone SE（375px），看有没有横向滚动条、链接是否可点、图标是否溢出
真正卡住人的从来不是 class 名怎么写，而是各栏内部高度差异在小屏堆叠后暴露出来的“空洞感”——不是样式没生效，是你没意识到：原本并排的三栏，小屏堆叠后，短栏和长栏之间那段空白，是栅格无法自动填平的。这时候得靠 gap-2 统一控制间距，而不是靠 mb-3 猜高度。
