小屏下Footer多栏自动变单列的关键在于正确使用断点类组合与容器结构：必须写col-12 col-md-4（而非仅col-md-4），确保xs断点强制单列；Footer需包裹在container-fluid或container内激活栅格上下文，避免row负margin外溢；类名须按从小到大顺序书写，防止小屏断点被覆盖。
小屏下Footer多栏自动变单列，关键在断点与类名组合
bootstrap 默认的 col- 类在小屏会塌缩成单列，但很多人发现加了 col-md-4 后，手机上还是挤成一排或错位——问题不在栅格本身，而在没切断“水平排列”的默认行为。footer 容器通常用 <div class="row"> 包裹，而 <code>row 在小屏仍试图维持 flex 横向布局，必须显式干预。
- 用
col-12 col-md-4而不是col-md-4：确保小屏（xs）强制占满整行 - 避免在
row上加flex-nowrap或自定义flex-direction，这会破坏响应逻辑 - 如果 Footer 内部有链接/列表，别让
<ul></ul>的默认 margin/padding 干扰高度，建议统一加mb-0和list-unstyled
移动端垂直堆叠失效？检查是否漏了 .container 或 .container-fluid
常见现象：小屏下多栏没垂直、文字重叠、甚至溢出屏幕右侧——大概率是 Footer 没套标准容器。Bootstrap 的栅格系统依赖父容器的 padding 和 max-width 控制，直接把 row 放在 <footer></footer> 标签下，row 的负 margin 会外溢，导致子列计算错误。
- 必须包裹在
<div class="container"> 或 <code><div class="container-fluid"> 内 <li> <code>container在sm及以下宽度为 auto，padding 已适配；container-fluid全宽但需手动加px-3防边缘贴边 - 不要用
container-xl等高阶容器，它们在xs下不生效，反而让小屏列宽失控 - 写法示例：
col-12 col-sm-6 col-lg-4—— xs 单列，sm/md 两列，lg+ 三列 - 别写
col-lg-4 col-sm-6：sm 类会被 lg 类覆盖，sm 屏实际按 lg 规则渲染 - 如果某栏内容明显更长（如联系表单），加
col-12 col-lg-6单独控制，避免高度不一致拉伸其他栏 - 标题字号统一用
h5或fw-bold fs-6，避免font-size: 1rem这类固定值 - 图标尺寸用
fs-5（对应 1.25rem），比text-lg更可靠，后者在 xs 下可能无效 - 栏内元素垂直间距用
mb-3，别用mb-4——小屏空间紧张，mb-3在 xs 下是 1rem，mb-4是 1.5rem，易造成底部留白过大
需要三栏→两栏→单栏渐进切换？用 md / lg / xl 组合类
纯 col-md-4 是「md 起三栏，以下全单列」，但若希望平板（lg）显示三栏、小平板（md）显示两栏、手机（sm）单列，就得叠加断点类。注意顺序：Bootstrap 从最小断点向上覆盖，所以小断点类要写在前面。
文字截断、图标错位、间距不均？优先用工具类而非自定义 CSS
响应式 Footer 最容易在小屏暴露样式污染：比如图标用 <i></i> 没设 fs-5 导致过小，或 mt-4 在 xs 下撑开过大空白。Bootstrap 5 提供足够工具类，硬写 media query 反而增加维护成本。
row 在小屏下的 flex 主轴对齐方式。即使列宽正确，若内部文字右对齐或图标居中，小屏时因容器变窄，justify-content 可能意外拉伸内容。真要调对齐，用 text-center 或 text-md-start 显式控制，别依赖 row 默认行为。
