Bootstrap中flex-wrap类必须显式加在.d-flex容器上，因.d-flex默认nowrap；.row自带wrap是特例；响应式flex-wrap需检查CSS是否生成；row-cols-auto不控制换行；长文本需配合white-space: normal；align-content-*仅对多行生效。
flex-wrap 类必须显式加在 .d-flex 容器上
Bootstrap 的 .d-flex 默认是 flex-wrap: nowrap，内容超宽时直接横向溢出，不会自动折行。你不能指望它像 .row 那样“自带换行”——.row 是特例，不是通则。要让自定义 Flex 容器换行，必须手动加 .flex-wrap（或响应式变体）：
<div class="d-flex flex-wrap"></div>- 只在中屏及以上换行：
<div class="d-flex flex-wrap-md"></div> - 反向换行（最后一行在最上）：
<div class="d-flex flex-wrap-reverse"></div>
⚠️ 注意：.flex-wrap-md 这类响应式类是否生效，取决于你用的 Bootstrap 构建版本。精简版可能没生成对应 CSS 规则，务必用 DevTools 检查最终渲染的 style 是否含 flex-wrap: wrap，否则得回退到内联样式或自定义类。
别把 row-cols-auto 当成“换行开关”
row-cols-auto 常被误认为是“自动换行开关”，其实它只做一件事：把每个 .col 或 .col-auto 的 flex-basis 设为 auto，也就是让列宽由内容决定。它本身不启用、也不禁用换行。
你看到的“换行”，其实是 .row 容器默认的 flex-wrap: wrap 在起作用。所以：
-
<div class="row row-cols-auto"><div class="col-auto">短文本</div><div class="col-auto">超长URL</div></div>能换行，靠的是.row，不是row-cols-auto - 如果子项用了
.col-md-4，它会覆盖flex-basis: auto，列变宽、挤不下、不换行——这不是row-cols-auto失效，而是你混用了冲突类 - 想限制最多 3 列？别用
row-cols-auto，改用row-cols-3或响应式组合如row-cols-sm-2 row-cols-md-3
长文本溢出时，text-break 和 white-space 必须配合
Flex 容器里放一段长 URL 或无空格字符串（比如 UUID），即使启用了 flex-wrap，它也大概率不换行——因为子元素自身阻止了断行。
典型错误：<div class="d-flex flex-wrap"><div class="badge text-break">https://api.example.com/123e4567-e89b-12d3-a456-426614174000</div></div>，依然溢出。
原因：.badge 默认带 white-space: nowrap，它直接压制了 text-break 的 overflow-wrap 效果。
正确做法：
- 显式重置
white-space：<div class="badge text-break" style="white-space: normal;"> - 加轻量自定义类：
<div class="badge text-break force-wrap">，其中.force-wrap { white-space: normal !important; }
align-content-* 只对多行 Flex 容器生效
如果你加了 flex-wrap: wrap（即 Bootstrap 的 .flex-wrap 或 .flex-wrap-sm），但发现换行后的几行在交叉轴上还是挤在一起、没拉开间距，那大概率是误用了 align-items-*——它只管单行内子项的交叉轴对齐；真正控制多行之间如何分布的，是 align-content-* 类。
这个类必须加在 Flex 容器（即有 d-flex 的父元素）上，且容器内必须实际发生换行（比如子项总宽 > 容器宽 + flex-wrap 启用），否则无效。
常见失效原因：
- 容器没“高度余量”——
align-content不是让内容变高，而是把已存在的多行，在父容器的剩余交叉轴空间里重新分配位置。如果父容器高度刚好被内容撑满（比如没设min-height、h-100或vh-100），那就没有“剩余空间”可分配 - 子项未真正换行：临时加
border或背景色，看是否出现两行及以上 - 响应式类如
align-content-md-between要求对应断点下也启用了flex-wrap-md，否则小屏仍为单行，类不触发
换行逻辑本身不难，但容易卡在“以为加了就生效”的错觉里——真正起作用的从来不是某个单一类，而是 d-flex + flex-wrap + 容器尺寸约束 + 子项宽度行为 四者共同达成的结果。
