Bootstrap 5 的 .row 默认是 display: flex，但若父容器设为 display: block、grid 或 column 方向的 flex，则 .row 失去 flex 上下文；同时 .col 必须是 .row 的直接子元素，中间插入 form 等标签会破坏栅格结构，导致列不水平排列。
父容器不是 flex 容器，.row 就不生效
Bootstrap 5 的 .row 默认是 display: flex，但这个行为会被你或第三方 CSS 覆盖。一旦父级（比如 <form>、<div class="container"> 或自定义 wrapper）加了 display: block、display: grid，甚至 display: flex !important 配了 flex-direction: column，那它内部的 .row 就彻底失去 flex 上下文——子元素 .col 自然不会水平排列。
常见误操作包括：
- 在
<form>标签上直接加class="d-flex flex-column"，结果把整个表单压成一列，.row变成“摆设” - 用 SCSS 自定义了全局
.row { display: block; }，没意识到这会废掉整套栅格 - 用了 Vue/React 组件库的 layout 包裹器（如
<Card>），其根元素默认display: block，且未透传className
验证方法：打开浏览器 DevTools，选中 .row 元素，在 “Computed” 面板里看 display 值是不是 flex；如果不是，往上逐层检查父级的 display 和 !important 干扰。
.col 不是 .row 的直接子元素，结构就断了
Bootstrap 的栅格系统对 DOM 层级极其敏感：.col 必须是 .row 的**直接子元素**。中间插一层 <form>、<div class="form-group"> 或 <section>，都会让 .col 失去宽度计算和 flex 分配逻辑。
立即学习“前端免费学习笔记（深入）”；
典型错误结构：
<div class="row">
<form>
<div class="col-md-6"></div>
</form>
</div>
正确写法必须是：
<div class="row">
<div class="col-md-6">
<form></form>
</div>
<div class="col-md-6">
<div class="card"></div>
</div>
</div>
注意：.form-group 本身不是栅格单元，不能替代 .col；它只负责内边距和间距，不参与宽度分配。
响应式类名写错或冲突，小屏下自动退化
写 class="col-12 col-md-6" 是为了小屏竖排、中屏横排，但如果漏了 col- 前缀（比如只写 md-6），或者混用冲突类（如 col-6 col-lg-12 d-none d-lg-block），就会导致列宽失效或直接隐藏。
尤其要注意：
-
col（无数字）表示“等分剩余空间”，不是“占满整行”；想固定宽度必须带数字，如col-12、col-md-4 - 断点类顺序无关紧要，但
d-none如果出现在前面，会压制后续所有d-*-*类，除非后者带更高断点且媒体查询命中 - 用
col-auto时，内容过长会撑开列宽，破坏等分布局，建议配合text-truncate或min-width
Flex 对齐类加错位置，看起来像没排开
.row 默认 align-items: stretch，所以高度不同的 .col 会拉伸到同一高度，但文字或按钮仍可能视觉错位。这不是没水平排列，而是垂直对齐没调好。
解决办法不是改 .col，而是控制 .row 或具体 .col 的对齐方式：
- 全行垂直居中：
<div class="row align-items-center"> - 某列内部内容居中：
<div class="col d-flex align-items-center"> - 避免在
.col上直接加mt-auto或mb-auto——它需要父容器是 flex 才有效，而默认.col是display: block
如果加了 align-items-center 还是偏上，大概率是 .row 没有足够高度：浏览器按内容撑高，没空间可居中。此时加 min-height: 100px 或用 h-100（需父级有高度）才能生效。
