小屏下多栏Footer不垂直堆叠的根源是容器结构错误：必须用container或container-fluid包裹footer，且row需紧贴其内层，否则栅格响应链断裂。
小屏下多栏Footer不垂直堆叠？先检查容器结构
直接原因往往是 footer 没包在正确容器里，或者漏了 row。Bootstrap 的栅格计算依赖 row 的负 margin 抵消 col 的 padding，没 row 就等于断了响应链。
- 必须用
<div class="container">或<div class="container-fluid">包裹整个 Footer，不能只写<footer>标签就完事 -
row必须紧贴在容器内层，结构得是：<div class="container"><div class="row"><div class="col-12 col-sm-4">…</div></div></div> - 别用
container-xl等高阶容器——它们在 xs（ - 如果用了
container-fluid，建议手动加px-3防边缘贴边；用container则不用额外处理左右 padding
col-* 类怎么写才真正在小屏变单列
只写 col-md-4 是不够的。Bootstrap 默认从 sm（≥576px）起启用栅格，xs 下它不会自动退化为 100% 宽度——除非你显式告诉它“小屏必须占满”。
- 正确写法是
col-12 col-sm-4：col-12强制 xs 下 100% 宽，col-sm-4在 ≥576px 时才分三栏 - 类名顺序必须从小到大：
col-12 col-sm-6 col-lg-3有效，col-lg-3 col-sm-6 col-12无效（浏览器匹配第一个就停） - 别写
col-4——它在所有尺寸都占 1/3，小屏也不会换行 - 如果某栏内容特别长（比如地址、表单），单独加
text-wrap，否则小屏会溢出容器
用 flex-column 替代 col-* 更干净？什么时候该切
当 Footer 内容语义独立（如“关于我们”“联系方式”“法律条款”），且你希望小屏下严格垂直、顺序可控、避免高度不一致导致的空白断裂，d-flex + flex-sm-column 是更直接的选择。
- 删掉所有
row/col-*，改用：<div class="d-flex flex-sm-column gap-3"><div>栏1</div><div>栏2</div></div> - 大屏默认
d-flex即flex-row，无需额外声明；小屏用flex-sm-column切换流向 - 避免同时加
justify-content-between和flex-sm-column——主轴变垂直后，“between”会把内容上下撑开，造成意外空白 - 每栏内部用
d-flex flex-column gap-2控制子项间距，比一堆mb-2更可靠，也防高度错位
版权行和社交按钮怎么放才不崩
版权信息和社交按钮通常需要跨栏对齐或单独定位，硬塞进同一 row 容易在小屏下错位、重叠甚至横向滚动。
- 版权行必须脱离多栏栅格，单独放在
footer底部：<div class="mt-auto pt-3 text-center">© 2026</div> - 社交按钮别用
float或position: absolute——图标容易飞出去；稳妥做法是用d-inline-flex align-items-center gap-1包裹图标+文字 - 图标统一用 Bootstrap Icons，配合
btn btn-sm rounded-circle，别手写 SVG 或用第三方库 - 如果左侧 logo + 中间导航 + 右侧版权需小屏垂直排列，别拆成三个
col，而是用一个d-flex justify-content-between大容器，再给中间部分加d-flex flex-sm-column单独响应
真正容易被忽略的，是各栏内元素高度差异带来的视觉断裂——不是 CSS 没生效，而是你没意识到：小屏堆叠后，原本等高的三栏变成三段高度不一的块，底部对齐线就没了。这时候靠 align-items-start 比靠 h-100 更稳。
