align-content在.row上常无效，因其仅作用于多行flex容器，而.row默认为单行（flex-wrap: nowrap），须加flex-wrap-wrap并确保列实际换行，且父容器需有富余高度。
align-content 在 .row 上为什么经常没效果
因为 align-content 控制的是“多行 flex 项目在交叉轴上的分布”，而 Bootstrap 的 .row 默认只有一行（所有 .col 都在同一行内换行，不是生成多个 flex 行）。只要列没触发换行（比如没加 flex-wrap: wrap 或内容没溢出），align-content 就完全不生效。
常见错误现象：row align-content-center 加了但毫无反应；检查 computed styles 会发现 flex-wrap 是 nowrap，或者所有列宽度加起来 ≤12，根本没产生第二行。
- 必须先让
.row变成多行容器：加flex-wrap-wrap类（Bootstrap 5.3+ 提供flex-wrap工具类） - 然后确保子列实际“撑出多行”：比如用
col-6 col-6 col-6（三列共 18 栅格），或响应式下col-sm-6 col-md-4在中屏断点自动折行 -
align-content-start/align-content-center/align-content-between才有作用空间
align-content 和 align-items 别混用错对象
align-items 管单行内所有列在交叉轴（y 轴）上的对齐方式，比如让三列卡片统一底部对齐；align-content 管的是“多行之间”的垂直间距分配——比如两行卡片，想让它们上下等距撑满容器高度。
使用场景：后台数据列表页，每行显示 4 张卡片（col-md-3），但总条数是 9 条 → 渲染为 2 行（4+4）+ 第三行 1 张。这时想让这三行在父容器里均匀分布，就得用 align-content-around 或 align-content-space-between。
-
align-content必须加在.row上，且仅当它已变成多行 flex 容器时才起效 - 别加在
.col上——.col默认不是 flex 容器，align-content对非 flex 容器无效 - 如果父容器（如
.row）没有明确高度（比如没加vh-100或min-height: 300px），align-content也没空间可分配
替代方案：row-cols-* 比 align-content 更可靠
Bootstrap 5.3+ 推出的 row-cols-* 类（如 row-cols-3）本质是用 CSS Grid 替代传统 flex 栅格逻辑，它天然支持“每行固定列数 + 最后一行自动居中”，不需要手动算 align-content 参数。
例如：动态加载 7 张卡片，用 row row-cols-3 justify-content-center，就能让前三行分别是 3+3+1 张，且最后一行那 1 张自动水平居中，不用 JS 补空列、也不依赖 align-content 的多行前提。
-
row-cols-3强制每行最多 3 列，超出自动换行，行为更可预测 - 配合
justify-content-center可让最后一行居中；配合g-3控制间隙 - 兼容性注意：
row-cols-*在 IE 中不支持，如需兼容 IE11，退回用 JS 插入空.col或改用text-center+col-12包裹单张
最后检查：父容器高度是否真的存在
align-content 不是“魔法推力”，它只是把已有行按规则分隔。如果 .row 的高度由内容撑开（比如只有两行卡片，总高才 200px），那即使加了 align-content-space-between，两行之间也不会拉开——因为没剩余空间可分配。
真正起效的前提：父级（至少 .row 或它的某个祖先）要有可测量的、富余的高度。
- 优先用
vh-100、min-vh-100或h-100（配合html, body { height: 100% }） - 避免只写
min-height: 500px却不设height: 100%—— flex 容器不会继承min-height作为对齐参考 - 调试时打开浏览器 devtools，看
.row的 computed height 是否大于内部所有行高度之和
