bootstrap 4+ 默认用 flexbox 控制文档流，弃用 float；row 和 col 均为 flex 容器，子元素默认水平排列；需显式加 flex-column 才能垂直堆叠；过度嵌套 row/col 导致语义弱、调试难，建议简单布局用原生 flex，复杂布局用 grid。
Bootstrap 的文档流默认由 Flexbox 控制，不是传统 float 或 inline-block
Bootstrap 4 及之后版本（包括 Bootstrap 5）已完全弃用 float 布局，网格系统和大多数布局类（如 row、col、d-flex）底层都基于 display: flex。这意味着元素默认遵循 Flex 容器的主轴方向（flex-direction: row），子元素水平并排，且不触发 BFC，也不受传统文档流中块级元素“换行堆叠”规则约束。
常见误判是以为 col 就是“块级盒子”，其实 col 类自带 display: flex 和 flex-wrap: wrap，它的子元素若未设 flex-direction: column，就永远不会垂直堆叠——哪怕只放一个子元素，它也按 flex item 渲染，不是普通文档流块。
想让元素垂直堆叠？别依赖默认，显式加 flex-column
当使用 row + col 或 d-flex 容器时，子元素默认横向排列。要改成上下堆叠，必须干预 flex-direction：
-
flex-column是最直接的方式：给容器加该类，等价于flex-direction: column - 如果容器是
col，它本身已含display: flex，但没设flex-direction，所以仍为row；加flex-column才生效 - 避免混用
flex-column和flex-row在同一容器上——后者会覆盖前者，CSS 层叠优先级相同，后声明的生效 - 注意响应式变体：
flex-sm-column、flex-md-column等仅在对应断点生效，小屏垂直、大屏水平可这样组合
用 row 和 col 排列的隐含代价：嵌套深、语义弱、调试难
Bootstrap 的栅格本质是“Flex 容器套 Flex 容器”，row 是 flex 容器，每个 col 也是 flex 容器（含 display: flex）。这种设计带来几个实际问题：
- DOM 层级容易过深：比如
<div class="row"><div class="col"><div class="row">...，调试时很难一眼分清哪个 flex 容器控制哪段流向 <li>class 名无语义：<code>col-6不说明内容类型，只描述宽度占比，后期维护者无法从 HTML 推断结构意图 - 与原生 CSS-in-JS 或现代布局（如
grid）冲突明显：一旦项目引入display: grid布局，再混用row/col会导致嵌套 flex/grid 容器行为不可预测 - 移动端重排依赖媒体查询硬编码，例如
col-md-6 col-lg-4的断点值写死在类名里，无法动态适配非标准设备宽度 - 对简单布局，直接用原生
display: flex+flex-direction+gap，代码更短、意图更明、无框架包袱 - 对复杂二维布局，
display: grid比多层row/col更直观，尤其涉及跨行/跨列、对齐控制时 - 保留 Bootstrap 组件（如
btn、card、modal），但放弃其栅格系统，自定义一套轻量 class 控制流（如stack、inline、responsive-stack） - 警惕“全栈用 Bootstrap”的惯性——它的优势在快速原型和统一组件，不在精细流式控制
替代方案比强行 hack 更可持续
当发现总在补 !important、反复加 flex-column、或为绕过 col 的 margin/padding 写大量覆盖样式时，说明框架抽象层正在反噬开发效率。这时值得考虑：
真正难的不是让两个 div 垂直排列，而是判断什么时候该信任框架、什么时候该亲手接管布局逻辑。这个边界，往往出现在第三层嵌套 row 开始。
