d-flex容器默认不换行，因默认含flex-wrap:nowrap；需显式加flex-wrap类才换行，且换行效果受子项flex属性、类冲突及white-space等影响。
d-flex 容器默认不换行，必须显式加 flex-wrap 类；.row 例外，它默认就带 flex-wrap: wrap，所以直接用就行。
为什么 d-flex 加了也不换行？
因为 .d-flex 默认等价于 display: flex; flex-wrap: nowrap，内容超宽只会横向溢出，不会折行。
-
flex-wrap必须手动加在容器上：<div class="d-flex flex-wrap"> - 响应式类如
flex-wrap-md不是 Bootstrap 默认全量生成的，精简版可能缺失——务必用 DevTools 检查最终渲染的 CSS 是否含flex-wrap: wrap，否则得回退到内联样式或自定义类 - 别指望
row-cols-auto控制换行：它只设flex-basis: auto，换行靠的是.row自身的flex-wrap: wrap
.col 类为什么让换行失效？
Bootstrap 5 的 .col 默认是 flex: 0 1 0 + flex-grow: 1，子项会强行撑满整行宽度，没“空隙”触发换行。
- 混用
.col-4和flex-wrap，大概率还是单行——不是flex-wrap失效，而是子项太“贪” - 想按内容宽度自动折行，改用
.col-auto+flex-shrink-0：<div class="row d-flex flex-wrap"><div class="col-auto flex-shrink-0">内容</div></div> -
.col-md-4会覆盖.col-auto的flex-basis，导致列变宽、挤不下、不换行——这是类冲突，不是 bug
怎么让换行后的多行内容垂直居中分布？
align-content-center 只在多行布局中生效，单行时完全无效。
- 必须同时满足三个条件：容器有
d-flex+flex-wrap+ 实际发生换行（子项总宽 > 容器宽） - 如果容器高度由内容撑开，
align-content很难看出效果；建议配合固定高度或min-height - 别和
align-items-center混用：align-items管每行内子项对齐，align-content管“行与行之间”的分布 - 小屏下未换行时，
align-content-md-center才真正起作用，否则类被忽略
长文本或 URL 不换行怎么办？
即使启用了 flex-wrap，子元素自身阻止断行，照样溢出。
-
.badge默认带white-space: nowrap，会压制text-break的overflow-wrap - 正确写法是显式重置：
<div class="badge text-break" style="white-space: normal;"> - 或加轻量自定义类：
<div class="badge text-break force-wrap">，其中.force-wrap { white-space: normal !important; } -
gap比margin更干净，但 IE 不支持；若需兼容，改用px-2 py-1类模拟间距
flex-basis 和 flex-shrink，而不是单纯加个类就完事。最容易被忽略的点是：你看到的“换行”，往往不是因为你写了 flex-wrap，而是因为某处类名悄悄覆盖了它。 
