<p>row-cols-auto 不触发换行，仅设子项 flex-basis: auto 使列宽由内容撑开；换行由父容器 flex-wrap 决定，.row 默认为 wrap；align-content-* 控制多行垂直分布，需父容器交叉轴有剩余空间。</p>
row-cols-auto 不是换行开关，它只控制列宽
row-cols-auto 的作用被严重误解。它不触发换行，也不决定“几列一换”，它只是让每个 .col 或 .col-auto 的 flex-basis 变成 auto（即 flex: 0 0 auto），使列宽由内容撑开。真正决定是否换行的，是父容器的 flex-wrap 属性——而 Bootstrap 的 .row 默认就是 flex-wrap: wrap。
常见错误现象：row-cols-auto 加了但所有列还挤在一行、横向溢出。原因通常是：
- 子项用了
.col-md-4这类固定比例类，覆盖了flex-basis: auto，列变宽无法收缩 - 子项内有长单词或 URL，没加
word-break: break-word或overflow-wrap: break-word - 父
.row被其他 CSS 强制设了flex-wrap: nowrap -
.row没包在.container或.container-fluid内，导致宽度无限撑开
换行后多行内容上下对齐靠 align-content-*，不是 align-items
想让换行后的几行在垂直方向拉开间距？别用 align-items-center —— 它只影响单行内子项的交叉轴对齐。真正管“多行之间怎么分布”的是 align-content-* 类，比如 align-content-around、align-content-between。
但它有个硬前提：父容器必须在交叉轴上有剩余空间。如果 .row 高度刚好被内容撑满（比如没设 min-vh-100、h-100 或显式 height），那所有 align-content-* 都不会生效。
典型排查步骤：
- 确认子项确实发生了换行（临时加
border或背景色观察） - 检查父容器是否有高度约束，例如
min-height: 300px或min-vh-100 - 确保响应式类匹配，比如用了
align-content-md-between，就得同时启用flex-wrap-md
要等宽 + 自动换行，别用 .col-4，改用 flex + min-width
.col-4 本质是 flex: 0 0 33.333%，配合 flex-grow: 1，会让子项强行拉伸占满整行，反而堵死换行条件。真想实现“每项最小宽度 250px、超了就换行、换行后仍保持视觉均衡”，得绕开 .col 类。
推荐组合：
- 父容器加
d-flex flex-wrap gap-2 - 子项统一加
flex-shrink-1（即flex: 0 1 auto），再配内联样式min-width: 250px - 如需响应式换行点，用
min-width: 150px（小屏）、min-width: 250px（中屏）等配合断点类
示例：
<div class="d-flex flex-wrap gap-2"> <div class="flex-shrink-1" style="min-width: 250px;">内容较短</div> <div class="flex-shrink-1" style="min-width: 250px;">这个标题特别长，会触发换行</div> <div class="flex-shrink-1" style="min-width: 250px;">第三项</div> </div>
row-cols-* 和 row-cols-auto 互斥，不能混用
row-cols-3 和 row-cols-auto 是同一组 CSS 规则的不同分支，加在同一个 .row 上会相互覆盖。前者设的是固定列数（通过 flex: 0 0 calc(33.333% - var(--bs-gap))），后者设的是 flex: 0 0 auto —— 后者优先级并不更高，实际效果取决于 CSS 加载顺序和 specificity。
所以如果你看到加了 row-cols-auto 却还是等宽，大概率是项目里其他地方也写了 row-cols-3（比如全局样式或组件库默认类），或者你误把 row-cols-auto 加在没子 .col 的空 .row 上——它根本不会生效。
关键提醒：这类类名只对直接子元素起作用；嵌套的 .row 需要单独加；且 row-cols-auto 必须和 .col 或 .col-auto 配合使用才有意义。
