小屏下Footer多栏垂直堆叠需显式写col-12 col-sm-4或改用d-flex flex-sm-column；因Bootstrap栅格默认从sm断点（≥576px）生效，col-sm-4在xs下不自动退化为100%宽，除非父容器有row且子项未写死宽度。
小屏下 Footer 多栏垂直堆叠，别硬套 col-md-4 就完事——它在 xs 下不生效，除非你显式加 col-12；更稳妥的做法是直接用 d-flex + flex-sm-column，语义清晰、控制力强、不易错位。
为什么只写 col-sm-4 在手机上还是挤成一排？
因为 Bootstrap 的栅格断点从 sm（≥576px）开始生效，col-sm-4 在 xs（row 且子项没写死其他 col 类，但实际中常因结构缺失或覆盖而失效。
- 漏了
row：row提供负 margin 抵消col的 padding，缺了就导致列宽计算错误、换行失效 - 写了
col-4这种非法类名：Bootstrap 不识别，浏览器忽略，回退到默认 inline 行为 - Footer 直接写在
<footer></footer>标签里，没包container-fluid或container：栅格上下文丢失，断点类不触发 - 父容器设了
width、max-width或margin: auto：覆盖栅格的宽度逻辑
用 d-flex + flex-sm-column 替代 row/col 更可靠
Footer 内容天然语义独立（如“关于我们”“联系方式”“法律条款”），用 Flex 流向控制比网格更贴合需求，也避免各栏高度不一致导致的视觉断裂。
- 外层加
d-flex flex-sm-column，小屏自动垂直堆叠；大屏默认flex-row，无需额外声明 - 每栏内部统一用
d-flex flex-column gap-2控制间距，比一堆mb-2更稳定 - 若某栏含长地址或表单，加
flex-shrink-0防止被压缩变形 - 版权行必须脱离主 Flex 容器，单独用
mt-auto pt-3 text-center粘底，否则会被拉伸或错位
混合布局（logo + 导航 + 版权）怎么对齐又响应？
别把 logo、多栏导航、版权全塞进一个 row 或一个 d-flex——主轴对齐冲突（比如 justify-content-between 和 flex-sm-column 同时存在）会导致小屏上下撑开、留大片空白。
- 左侧 logo 和右侧版权用
d-flex justify-content-between包裹，小屏切换时去掉justify-content-between，改用flex-sm-column align-items-start - 中间多栏导航单独抽成一个
div，加d-flex flex-sm-column，让它自己响应，不影响左右区块 - 图标+文字混排用
d-inline-flex align-items-center gap-1，别用float或绝对定位 - 小屏测试重点：打开 DevTools 切到 iPhone SE 尺寸，确认无横向滚动、所有链接可点、无文字溢出
真正容易被忽略的是各栏内元素高度差异带来的“空洞感”——不是 CSS 没生效，而是你没意识到：小屏堆叠后，原本等高的栏变成参差不齐的块，视觉节奏就断了。用 gap-2 + flex-column 统一流向，比调 min-height 更轻量也更可控。
