够用，但默认仅从 sm（≥576px）起生效，xs 下需显式写 col-12 才能确保堆叠；正确结构须含 row，避免覆盖栅格的 display/width，多栏 footer 推荐 col-12 col-sm-4 + mb-4。
Bootstrap 5 的 col 类在小屏下自动堆叠是否够用？
够用，但默认行为只在 sm 及以上生效，xs（即无断点）下仍为单列——除非你显式指定响应式类。Footer 多栏常见需求是：桌面端三栏并排，小屏（≤576px）垂直堆叠。Bootstrap 5 的栅格系统默认从 sm 开始划分，所以 col-sm-4 在 xs 下会退化为 col-12（即 100% 宽度），但前提是父容器有 row 且子项没写死 col-*。
- 别写
col-4，它在所有尺寸都占 1/3，小屏也不会换行 - 正确写法是
col-12 col-sm-4：xs 下占满，sm 起分三栏 - 如果 Footer 内容本身有内边距或 flex 包裹，可能干扰栅格计算，优先用
row+col原生组合
为什么加了 col-sm-4 还是不换行？
常见原因是父容器缺失 row 类，或用了 container-fluid 但没嵌套 row。Bootstrap 5 的栅格依赖 row 的负 margin 来抵消 col 的 padding，漏掉 row 就会导致列错位、换行失效。
- 检查结构是否为：
<div class="container"><div class="row"><div class="col-sm-4">…</div></div></div> - 避免在
col上直接设display: flex或width，会覆盖栅格计算 - 用浏览器开发者工具检查元素 computed width，确认 xs 下是否真为 100%
需要在 xs 下保留部分对齐（比如 logo + 版权左右分置）怎么办？
纯栅格不够灵活时，可混用 text-center / text-start / text-end 配合 d-flex 和 flex-column。Footer 底部常需版权居左、链接居右，小屏时又希望它们上下排列——这时不要硬塞进同一 row，而是拆成两个逻辑块。
- 上层用
row+col-sm-4做三栏导航 - 下层用
<div class="d-flex flex-wrap justify-content-between pt-3"> <small>© 2026</small><small class="d-sm-block d-none">Terms</small> </div> -
d-sm-block d-none是关键：仅在 sm+ 显示，xs 下隐藏；版权文字用text-center或text-sm-start控制对齐
用 col-md-3 还是 col-sm-4？性能和兼容性有影响吗？
没有性能差异，但影响布局断点时机。小屏设备（尤其是旧款安卓 WebView）可能不识别 sm 断点（576px），导致多栏未及时堆叠。若目标用户含大量 ≤480px 屏幕，建议用 col-12 col-md-3，把堆叠起点后移到 md（768px），再配合媒体查询微调。
-
col-sm-4：576px+ 分三栏 → 适合现代移动浏览器 -
col-12 col-md-3：≤768px 全堆叠，更保守，适配老设备 - 不要混用多个断点如
col-6 col-sm-4 col-md-3，易造成计算混乱，优先选一个主断点
<footer class="bg-light"><div class="container py-5">
<div class="row">
<div class="col-12 col-sm-4 mb-4">栏目一</div>
<div class="col-12 col-sm-4 mb-4">栏目二</div>
<div class="col-12 col-sm-4 mb-4">栏目三</div>
</div>
<div class="border-top pt-4 text-center text-sm-start">
<small>© 2026 Company</small>
</div>
</div>
</footer>
注意 mb-4 在小屏下提供垂直间距，比用 row 的 g-4 更可控——因为 g-* 在 xs 下可能被压缩失效。
