col-md-4 是 bootstrap 5 实现中屏三等分、小屏垂直堆叠的最简方案，需配合 row 使用且避免 flex-nowrap、col-12 冲突、间距类误用及 box-sizing 重置等问题。
Bootstrap 5 的 col-md-4 是最直接解法
不用额外写 CSS，Bootstrap 5 的栅格系统默认就支持这种响应式行为：在中屏（md 及以上）三等分并排，在小屏（sm 及以下）自动堆叠为垂直排列。
关键不是“怎么让它们并排”，而是“别意外破坏断点行为”。常见错误是加了 flex-nowrap、white-space: nowrap 或固定父容器宽度导致换行失效。
-
col-md-4表示：在md（≥768px）及以上宽度时占 4/12 列（即 1/3），小屏下默认为col-12（占满整行） - 必须确保父容器有
class="row"，子项用class="col-md-4"，且不包裹在flex容器或table中 - 如果用了
container-fluid但内容溢出，检查是否误加了min-width或overflow-x: hidden阻断了栅格重排
为什么加 col-12 有时反而失效
显式写 col-12 col-md-4 看似更明确，但容易引发误解：Bootstrap 的类名是按断点**覆盖生效**的，col-12 在所有尺寸都强制占满，会压过 col-md-4 的中屏行为——除非你删掉 col-12 或改用 col-sm-12 col-md-4。
- 正确写法：
col-md-4（小屏自动 fallback 到 100%，无需声明） - 错误写法：
col-12 col-md-4→ 小屏和大屏都强制 100%，三栏永远不并排 - 若需在
sm（≥576px）就开始并排，用col-sm-4；若只在lg（≥992px）才并排，用col-lg-4
遇到错位或间隙异常？先查 g-3 和父容器
三栏看起来“没对齐”或中间有奇怪空白，大概率不是栅格问题，而是间距类或嵌套污染。Bootstrap 5 默认启用 gutter（列间距），但只对 row 生效。
- 确保使用
class="row g-3"（g-3是 1rem 间距），不要用mx-*或px-*手动调边距 - 避免把
col直接放在container外，或嵌套在非row的div里——这会让col失去负 margin 修正，出现左右偏移 - 如果用了自定义 CSS 重置了
box-sizing，记得给col加回box-sizing: border-box，否则 padding 会撑破宽度
需要等高或统一高度？别碰 height: 100%
三栏内容高度不一致时，有人试图用 height: 100% 或 min-height 强制拉平，结果在移动端也生效，造成大量留白。Bootstrap 本身不提供等高栅格，得靠其他方式。
- 推荐用
row+h-100+d-flex flex-column组合：给每栏加class="d-flex flex-column h-100"，再让内部内容用mt-auto推到底部 - 慎用
align-items-stretch：它只对 flex 容器有效，而row默认是 flex，但加了g-*后可能影响 cross-axis 对齐 - 纯 CSS 方案可考虑
display: grid替代，但会脱离 Bootstrap 栅格语义，失去响应式断点继承
实际最常被忽略的是：移动端垂直排列时，g-3 的上下间距会叠加，导致栏与栏之间空隙比预期大一倍——这不是 bug，是设计如此。如果觉得太松，改用 g-2 或单独给 col 加 mb-2 控制底部间距更可控。
