Bootstrap 5 的 .row 默认水平排列，因已设 display: flex 和 flex-direction: row；列堆叠问题多因缺失 .row、列数超12或断点不匹配；推荐用 .row-cols- 实现等宽自动换行；对齐应通过 .row 的 .align-items- 和 .justify-content-* 控制；升级时需将 .no-gutters 替换为 .g-0。
Bootstrap 5 的 .row 默认就是水平排列，别手动加 flex-direction: row
Bootstrap 5 使用 Flexbox 作为网格底层，.row 类已预设 display: flex 和 flex-direction: row，所以子元素（即 .col-*）天然水平排列。如果你发现列“堆成一列”，问题几乎肯定出在：没写 .row 容器、列数超 12、或用了响应式断点但视口不匹配。
常见错误现象：col-6 col-6 在小屏下错位、三列变成两行、col 没撑满父容器宽度。
- 确保每个
.col-*都包裹在.row内，不能直接放在.container下 - 单行所有
.col-*的数字之和不要超过 12（例如col-4 col-4 col-4✅，col-6 col-6 col-6❌） - 用
col-sm-6这类带断点的类时，检查当前浏览器宽度是否达到对应断点（sm是 ≥576px）
想让列等宽且自动换行？用 .row-cols-* 而不是硬写 .col-*
当需要“每行固定显示 N 列，内容多少都自动换行”时，.row-cols-* 是更干净的解法。它直接控制 .row 的子元素数量，不依赖列宽计算，也避免手动算 12 分割。
使用场景：商品卡片列表、图标栅格、响应式表单字段组。
<div class="row row-cols-2 row-cols-md-3"> 表示小屏每行 2 列，中屏起每行 3 列<li>子元素只需写 <code><div class="col">（注意是纯 <code>.col，无数字后缀），框架会自动均分宽度- 比手写
col-6 col-6 col-4 col-4 col-4更易维护，尤其内容动态增减时 - 让所有列等高：给
.row加.align-items-stretch（默认值，通常不用显式写） - 让列内容垂直居中：给
.row加.align-items-center - 让列在行内水平居中（比如只有 2 列但想居中显示）：加
.justify-content-center - 避免在
.col上滥用mt-auto或align-self，先确认是否该由.row统一控制 - 把所有
.no-gutters替换为.g-0 -
.g-1到.g-5对应不同 gap 大小，数值越大间距越大；.gx-*/.gy-*可分别控制水平/垂直间距 - 自定义 gap 时，直接在
.row上写style="gap: 0.5rem"也完全有效，且优先级高于工具类
遇到垂直居中或对齐错乱？优先检查 .align-items-* 和 .justify-content-*
.row 是 flex 容器，对齐行为由其自身类控制，不是子列的属性。很多人误在 .col 上加 align-self-center，结果无效——因为主轴是水平的，align-self 控制的是交叉轴（垂直方向），但前提是 .row 允许伸缩高度。
Bootstrap 4 升级到 5 后水平排列失效？重点查 .no-gutters 和 g-* 类
Bootstrap 5 废弃了 .no-gutters，改用 .g-0 控制间距。如果升级后列突然变宽溢出或错位，大概率是旧代码里还留着 .no-gutters，而新版本不认识它，导致 .row 回退到默认 gap 值（通常是 1rem），破坏原有布局流。
实际排版中，最常被忽略的是 .row 的存在必要性——它不只是个样式容器，而是 flex 格式化上下文的创建者。漏掉它，.col 就只是普通块级元素，再多个 col-3 也会垂直堆叠。
