bootstrap 5 的 .row + .col 在小屏自动堆叠是默认行为，因 xs 断点（
Bootstrap 5 的 .row + .col 在小屏自动堆叠是默认行为
不用额外写 CSS，Bootstrap 5 的栅格系统在 xs（width ）下会自动让所有 <code>.col 垂直排列、宽度 100%。关键在于别用固定断点强制“始终多栏”——比如避免写 .col-4（这在 xs 下也占 1/3 宽），而应使用响应式类如 .col-md-4。
常见错误是直接写 <div class="col-3">，结果小屏还是挤成四栏，溢出或文字折行异常。
<ul><li>正确写法：<code><div class="col-12 col-md-4"> → xs 全宽，≥md 才三栏
<li>Footer 内容若含链接列表，建议每栏用 <code><ul class="list-unstyled"></ul> 清除默认 margin/padding，再手动加 margin-bottom
.container-fluid 但小屏仍有横向滚动，检查子元素是否写了 white-space: nowrap 或未约束的 table / 图片如何让 Logo 和版权信息在小屏单独占一行且居中
Footer 顶部的 Logo 和底部的版权行通常需要脱离多栏结构，在所有尺寸下都独立居中。不能把它们塞进 .col 里靠 text-center 撑，否则在多栏布局中会被当成一列内容，破坏语义和可访问性。
- 用
<div class="text-center pt-4 pb-3"> 包 Logo，放在 <code>.row外部 - 版权行用
<div class="text-center py-3 border-top"> 放在 <code>.row后面，同样不参与栅格 - 避免对
.col内的文本用text-center实现“居中”，那只是视觉欺骗；真正的结构居中要靠容器级控制 - 用浏览器 DevTools 检查
.row计算后的flex-wrap是否为wrap；若显示nowrap，搜索项目中是否全局设置了.row { flex-wrap: nowrap !important; } -
.no-gutters只影响 padding，不影响换行，但它常和错误的 flex 设置共存，建议删掉，改用g-0（Bootstrap 5 推荐） - 如果用了 Sass 自定义主题，确认没意外启用了
$enable-grid-classes: false，否则.col类根本不会编译出来 - 在
<a></a>上加class="d-block py-2"，确保整行可点，而非仅文字区域 - 避免用
<span></span>包链接文字再设display: block—— 语义错误，屏幕阅读器可能跳过 - 如果用了
.nav-link，它默认有padding，但小屏下需检查是否被.col的padding抵消，建议显式加pt-1 pb-2
遇到 flex-wrap: wrap 失效导致小屏仍横排？检查父容器是否误加了 .no-gutters 或 flex-nowrap
Bootstrap 5 的 .row 默认是 display: flex + flex-wrap: wrap，但某些自定义样式或旧版迁移代码可能覆盖它。典型现象是：小屏下 .col-md-4 依然强行横排，内容被压缩甚至隐藏。
移动端点击区域太小？给 Footer 链接加 py-2 或最小高度保障触控体验
小屏垂直排列后，单行链接文字变少、行高变小，手指容易点空。这不是栅格问题，而是交互细节被忽略。
最易被忽略的是语义结构：Footer 不是视觉容器，而是地标区域（role="contentinfo"）。多栏只负责布局，每栏的 heading（如 <h5 class="mb-3">产品</h5>）必须真实存在，不能靠 CSS 生成伪元素代替。否则小屏下语音导航会跳过整栏内容。
