根本原因是.col-6在所有尺寸下强制占50%宽度，包括手机；应改用带断点的类如.col-sm-6，并配合flex-sm-column等Flex工具类控制容器方向与对齐。
为什么加了 .col-6 在手机上还是左右并排？
根本原因不是类没生效，而是你用了不带断点的 .col-6 —— 它在所有尺寸下都强制占 50% 宽度，包括手机。bootstrap 的响应式逻辑靠断点前缀驱动，.col-6 是“始终生效”，不是“默认堆叠”。
常见错误现象：缩放浏览器到手机宽度，两列依然挤在一起、文字换行混乱、甚至横向滚动。
- 想让手机端堆叠，必须用带断点的类，比如
.col-sm-6（≥576px 才生效），小屏下自动退化为 100% 宽度 - 别混用旧版前缀：
.col-xs-6在 Bootstrap 4+ 已移除，写了也无效 - 确保外层有
.container或.container-fluid，否则.row的负 margin 会破坏流式行为
.row 堆叠后中间还有大缝隙？
默认 .row 是 flex-direction: row，即使子列变 100% 宽，它仍按水平容器渲染，垂直间距（gap）可能被忽略或叠加出意外空白。
真正要的是：小屏时 .row 变成垂直容器，让子列自然堆叠且紧贴。
- 直接给
.row加flex-column→ 所有尺寸都垂直，不符合“桌面并排、手机堆叠”的需求 - 正确写法是组合断点类：
flex-sm-column flex-md-row，且顺序不能颠倒（小断点在前，大断点覆盖） - 如果用了
g-0还有缝隙，大概率是子列内部有margin-bottom或父容器没设高度上下文，导致align-items-center失效
怎么让手机堆叠、桌面居中，还不留白？
单纯靠栅格类做不到紧凑堆叠 + 桌面居中，必须混合 Flex 工具类控制主轴方向和对齐方式。
关键不是“怎么写列”，而是“怎么定义容器行为”。
- 容器用
d-flex flex-column flex-md-row justify-content-center align-items-center - 子项统一用
flex-md-grow-1或col-md-6，避免小屏下因内容高度差异拉出空白 - 去掉所有
mb-*、mt-*，改用gap-3控制堆叠间距——它只作用于 Flex 项目间，不会和 margin 叠加 - 如果堆叠后内容不居中，检查父容器是否设了
h-100或min-vh-100；没高度参考，align-items-center就没意义
嵌套两列时，手机堆叠错乱怎么办？
最隐蔽的坑：在左侧 .col-md-8 里再分两列，却忘了中间必须加 .row。
错误写法：<div class="col-md-8"><div class="col-6">A</div><div class="col-6">B</div></div> —— A 和 B 会脱离栅格系统，小屏下既不堆叠也不等宽。
- 嵌套必须加
.row：<div class="col-md-8"><div class="row"><div class="col-6">A</div><div class="col-6">B</div></div></div> - 嵌套的
.row不继承父级align-items，需要单独加align-items-stretch才能等高 - 嵌套列在手机端堆叠，依赖的是内层
.row的flex-column，不是外层的断点类
