Bootstrap 5 栅格系统不支持列垂直分布，应使用 .row + .col-12 实现区块垂直堆叠，配合 gy-4 控制行间距；避免给 .row 添加 flex-column，推荐用 .stack 处理简单垂直流布局。
Bootstrap 5 栅格系统本身不支持“列垂直分布”
bootstrap 5 的 .row 默认是 display: flex + flex-direction: row，它的“列”（.col）天生就是水平并排的。所谓“列垂直分布”，其实是误解了栅格术语——你真正需要的，是让多个区块在**页面上从上到下依次堆叠**，而不是让单个 .col 内部内容垂直排列。
用 .row + .col-12 实现视觉上的“垂直列”
这是最直接、语义最清晰的做法：放弃把多个内容塞进同一行里横向分列，转而让每个区块独占一行，靠栅格控制宽度和响应式行为。
-
.col-12确保小屏下 100% 宽度，内容自然垂直堆叠 - 中大屏可用
.col-md-6或.col-lg-4控制每行显示几项（例如卡片列表） - 用
.row.gy-4统一控制行间距（gy是 vertical gap，比手动加mb-3更可靠） - 避免在
.col内再加mt-3/mb-3，否则会和gy叠加造成双倍空白
示例：
<div class="row gy-4"> <div class="col-12 col-md-6"><div class="card">...</div></div> <div class="col-12 col-md-6"><div class="card">...</div></div> <div class="col-12"><div class="alert">全宽提示</div></div> </div>
别用 flex-column 强套 .row
给 .row 加 flex-column 看似能“垂直”，但会破坏栅格系统的核心逻辑：
-
.row的flex-wrap: wrap失效，多列在中屏可能被强行压成一列并溢出 -
.col的宽度类（如col-md-4）仍按 flex-basis 计算，但不再参与 wrap，响应式断裂 - 与
.g-*间距类冲突，gx/gy行为异常 - DevTools 里能看到
flex-direction: column生效了，但视觉上反而更难对齐、更难调试
真要垂直流布局，优先考虑 stack 或 d-flex
如果目标只是“几个元素上下堆叠+统一间距”，.stack 比栅格更轻量、意图更明确：
<div class="stack gap-3"> 默认就是 <code>flex-direction: column，且gap值来自 Bootstrap 的$spacers变量，缩放一致- 支持响应式
gap-md-4，但注意没有stack-md—— 方向不能按断点切换，要换方向得叠加flex-md-row - 子元素无需
.col类，也不受栅格断点干扰，适合表单控件、操作按钮组、标题+描述块等场景
复杂点在于：stack 不处理宽度自适应，如果子项需要“中屏两列、大屏三列”，还是得退回 .row + .col 结构；而很多人忽略的是，.stack 容器若没设高度上下文（比如父级没 min-vh-100），配合 justify-content-center 居中时会失效——这点比栅格更隐蔽。
