用 row + col-* 实现分栏列表，别套 container 套娃
Bootstrap 的分栏列表本质是栅格控制换行与宽度，不是靠容器嵌套“撑开”。常见错误是把 row 塞进 container 再塞进 footer 或 section，结果小屏下栏宽不收缩、文字挤成一团。正确做法是让列表容器本身成为栅格上下文：直接用 row，或用 container-fluid 包一层（带默认 padding），避免额外 container 干扰断点计算。
必须按从大到小顺序写类名，比如 col-12 col-md-6 col-lg-3 是安全的；反过来写 col-lg-3 col-md-6 col-12 会导致小屏断点失效——因为 CSS 层叠规则会覆盖前面的声明。
- 移动端（≤576px）强制单栏：
col-12 - 平板横屏（≥576px）双栏：
col-sm-6（比col-md-6更早触发，适配 iPad mini 等窄屏平板） - 桌面端（≥992px）四栏：
col-lg-3；若栏目内容极简（如纯图标+短词），可用col-lg-2六栏
每栏内部用 flex-column + gap-2，别靠 margin-bottom 拉间距
分栏列表里混着链接、按钮、小图标时，各栏高度常不一致，导致小屏堆叠后出现明显空洞。这不是栅格问题，而是内部排版失控。用 flex-column 替代传统块级流，再加 gap-2 统一垂直间距，比手动设 margin-bottom 更稳定——它不受父容器缩放、字体缩放、行高变化影响。
表单类元素（如 input、button）默认是 inline-block，小屏下易错位，统一加 w-100 占满栏宽；长地址或链接加 text-wrap 防溢出。
- 版权行必须脱离多栏栅格，单独放在
footer底部，用mt-auto+pt-3粘底 - 别给某栏加
min-height像素值，不同设备字体渲染差异会让内容被截断或留白过大 - 图标类（如 Font Awesome）别用
float或绝对定位，用text-center+fs-5控制尺寸
为什么不用 list-unstyled + 手动 margin？
很多人给页脚 ul 加 list-unstyled，再逐个调 margin-bottom，结果在不同断点下间距错乱。根本原因是 list-unstyled 只清除了默认 padding-left 和 margin，但没约束子项行为；而响应式断点切换时，margin 不随列宽缩放，视觉节奏就崩了。
正确方式是保留原生 ul 结构，只加 mb-0 清除底部外边距，用 fw-normal 和 text-muted 控制颜色与下划线，让语义和样式解耦。
-
list-unstyled在小屏堆叠后反而暴露结构缺陷：无序列表语义丢失，屏幕阅读器无法识别导航层级 - 若需对齐 logo 和版权文字，用
align-items-center配合row，别碰mt-auto——它在中屏高度变化时极易失灵
真正难的不是分栏数量，而是内容高度不一致时的错位
当某栏是纯文本链接，另一栏含表单或图标网格，小屏堆叠后高度差会拉出大片空白。这不是 bug，是 Flex 布局的自然表现。这时候不能硬加 h-100，因为不同设备行高、字体缩放不一致，反而导致文字截断。
更可控的做法是：每栏用 d-flex flex-column h-100，再给内容区加 flex-grow-1，让文字区域自动撑满剩余空间；顶部标题和底部版权固定高度，中间内容自适应。
- 别在
col上误加float、display: block等覆盖性样式，会破坏 Flex 行为 - 如果某栏必须等高（如卡片式页脚），优先用
row-cols-*而非单个col类，它强制每行固定数量，规避高度不一致导致的错位 - 所有
col必须直属于row，不能嵌套在另一个col里——否则 Flex 布局失效，列宽计算错误
