align-content只在多行flex容器中生效，因需同时满足flex-wrap: wrap、子项实际换行且交叉轴有剩余空间三个条件，单行或无剩余空间时该属性被浏览器忽略。
align-content-* 为什么加了没反应
因为容器没换行，或者没留出交叉轴空间。align-content-* 只在多行 Flex 布局中生效，而默认 flex-wrap: nowrap，所以光加 align-content-center 没用。
- 必须先给父容器加上
flex-wrap（或响应式类如flex-wrap-md） - 子项得真换行：临时加
border或背景色，确认出现两行及以上 - 父容器在交叉轴（通常是垂直方向）要有剩余空间——比如设
min-vh-100、h-100或显式style="height: 400px" - 别和
align-items-center混用还指望“叠加效果”：前者管行与行之间怎么分布，后者管单行内子项怎么对齐，作用对象不同
两行内容该用 align-content-between 还是 align-content-around
视觉差异明显，选错会拉不开间距或撑不满容器。
-
align-content-between：首行顶边、末行底边，中间无空隙（两行时就是上下贴边） -
align-content-around：顶边留一份间隙、两行中间留一份、底边再留一份，共三份等量空隙，更均衡 - 两行场景下，
align-content-around通常比align-content-between更符合“上下等距撑开”的直觉 -
align-content-evenly在 Bootstrap 5.3+ 才支持，旧版本无效；两行时效果和around一致
row-cols-auto 不是换行开关，别误以为它能控制列数
row-cols-auto 只让每列 flex-basis 变成 auto，列宽由内容决定；真正决定是否换行的，是 flex-wrap。
- 常见失效原因：
.col-md-4这类固定比例类会覆盖flex-basis: auto，导致列无法收缩换行 - 长单词或 URL 没加
word-break: break-word，撑宽容器阻止换行 - 父
.row被其他 CSS 强制设了flex-wrap: nowrap -
.row没包在.container或.container-fluid内，宽度无限撑开，子项永远挤得下
移动端列堆叠时间隙过大，怎么收紧
默认 .row 是 flex-direction: row，小屏下虽然列变全宽堆叠，但 Flex 主轴仍是水平，垂直方向的 margin/gutter 不会自动归零。
- 解决方法：用响应式方向类，小屏切为 column 布局，比如
flex-md-row flex-sm-column - 配合
g-0移除 gutter，但注意g-0默认只清水平间隙；垂直堆叠时需额外加gy-0或直接设margin-bottom: 0 - 别依赖
mt-auto推底部元素——如果父容器不是d-flex flex-column，它根本不起作用 - 最稳做法：小屏下把
.row改成d-flex flex-column，再用justify-content-center控制垂直分布
实际调的时候，最容易漏的是容器高度约束和换行触发条件——这两点不满足，所有 align-content-* 都是摆设。
