直接用col-12 col-md-4可实现移动端堆叠，但错位、重叠、高度不齐的主因是卡片或列存在内联width/min-width/max-width样式，破坏flex-basis计算；必须删除所有固定尺寸样式，并确保col嵌套在row内，否则断点逻辑失效。
直接用 col-12 col-md-4 就能实现移动端堆叠，但很多人卡在“堆叠后错位”“卡片重叠”“高度不一致”这几个点上——核心不是类写得对不对，而是有没有动到干扰栅格的内联样式和容器结构。
为什么加了 col-12 还是横向挤在一起？
最常见原因是卡片或列容器写了 style="width: 300px;" 或 min-width，它会强行覆盖 col-12 在小屏下的 100% 宽度行为。Bootstrap 的栅格靠 flex 布局流动，而固定宽度会破坏 flex-basis 计算，导致元素拒绝收缩、横向溢出、视觉压叠。
- 删掉所有卡片/列上的
style="width:"、style="min-width:"、style="max-width:" - 确保每张卡片都包裹在
<div class="col-12"> 内，且该 <code>col外层有<div class="row"> —— 没 <code>row，col就退化成普通块级元素，断点逻辑全失效 - 别用
col-sm-4 col-md-4 col-lg-4：sm 断点（≥576px）在手机横屏也生效，三栏仍并排；col-12 col-md-4才真正保证超小屏独占一行 <div class="row row-cols-1 row-cols-md-3"> → 小屏每行 1 张，中屏起每行 3 张<li>如果卡片内容高度差异大，加 <code>h-100到每个card上，避免堆叠时参差不齐-
row-cols-*不支持单独设置左右栏宽度，要差异化宽度（比如左栏 200px、右栏 auto），还是得回退到传统col-*+flex-shrink-0组合 - 把图标和文字一起包进
<div class="d-flex align-items-center"> <li>图标用 <code>me-3（不是mr-3）保持右侧间距，兼容 RTL - 文字容器加
text-truncate防止长文本撑破列宽；必要时加style="max-height: 2.4em; line-height: 1.2;"限制两行不截断
row-cols-* 和手动写 col-* 有什么区别？
row-cols-1 是 Bootstrap 5.2+ 提供的快捷方式，作用等价于给每个子项加 col-12，但它更省代码、更易维护，尤其适合卡片数量动态变化的场景。不过它只控制“每行几列”，不替代断点响应逻辑。
堆叠后图标和文字上下不对齐怎么办？
图标默认是行内元素，基线对齐不稳定；小屏下字体缩放、行高变化会让图标“浮高”或文字下沉。不能靠 vertical-align: middle 硬调，容易在不同设备上失效。
真正容易被忽略的不是类名拼写，而是“谁在控制尺寸”——要么全交给栅格（删 width、保 row），要么全交给 flex（用 row-cols-* 或 d-flex + flex-wrap），混用就会在某个断点突然崩掉。
