加了 flex-wrap 仍是单行，根本原因在于子项的 flex-basis 和 flex-grow: 1 强制拉伸占满整行，导致无空间触发换行；.col-* 类默认弹性行为（如 flex: 0 0 33.33% 或 flex: 0 1 0）会锁死尺寸或争抢空间，使 wrap 失效，需改用 col-auto + flex-shrink-0 或显式控制 min-width、white-space 和 word-break 等内容断行规则。
因为 .row 默认虽带 flex-wrap: wrap，但子项（如 .col-4）的 flex-basis 和 flex-grow: 1 会强制拉伸占满整行，导致容器“没空隙”触发换行——不是 Flex 失效，而是子项太贪。
为什么加了 flex-wrap 还是单行？
根本问题不在容器，而在子项的弹性行为。Bootstrap 的 .col-* 类默认设 flex: 0 1 0（或类似值）+ flex-grow: 1，意味着：即使父容器已启用 flex-wrap: wrap，所有子项仍会互相争夺空间、强行撑满 100% 宽度，不留换行余地。
-
.col-4实际生成flex: 0 0 33.333333%，但若父容器宽度不是 3 的整数倍，最后一项可能被挤到下一行，造成视觉错乱，而非预期的“按内容自然折行” - 混用
.col-md-4和.col-auto会导致flex-basis冲突：.col-md-4覆盖.col-auto的auto值，列变宽、挤不下、不换行 - 误加
flex-nowrap到.row上（比如从旧项目复制代码），直接覆盖默认wrap
怎么让 .col 真正按内容宽度自动换行？
放弃固定比例类，改用语义更清晰、弹性更可控的组合：
- 父容器用
d-flex flex-wrap（.row本身已含flex-wrap: wrap，但需确保没被覆盖） - 子项用
col-auto flex-shrink-0：.col-auto让宽度由内容决定，.flex-shrink-0防止被压缩变形 - 若需最小宽度临界点（比如卡片至少 250px 才换行），加内联样式
style="min-width: 250px"或自定义类 - 避免在子项上写
width、flex: none或flex-shrink: 0，这些都会锁死尺寸，使flex-wrap形同虚设
长文本、URL 或 badge 不换行怎么办？
即使容器和子项都配置正确，内容自身阻止断行，照样溢出。关键不是布局层，而是内联内容的渲染规则：
立即学习“前端免费学习笔记（深入）”；
-
.badge默认带white-space: nowrap，会压制text-break的overflow-wrap - 正确做法是显式重置：
<div class="badge text-break" style="white-space: normal;"> <li>或加轻量自定义类：<code><div class="badge text-break force-wrap">，其中 <code>.force-wrap { white-space: normal !important; } - 对含长英文单词或 URL 的子项，必须同时设
min-width: 0+word-break: break-all+overflow-wrap: break-word，三者缺一不可 - 错误结构：
<div class="col-8"><div class="col-4">A</div></div> - 正确结构：
<div class="col-8"><div class="row"><div class="col-4">A</div></div></div> - Chrome DevTools 中检查子项的
computed width和flex-basis：若显示为auto或远小于预期，说明它已退出栅格计算流程
嵌套时换行突然失效，大概率漏了 .row
子 .col-* 必须是 .row 的**直接子元素**。一旦嵌套层级里跳过 .row（比如 .col-8 > .col-4），就丢失 Flex 上下文，子项退化为普通块级元素，既不换行也不响应栅格逻辑。
最容易被忽略的点是：你看到的“不换行”，往往不是 CSS 没生效，而是子项的 flex-basis、min-width 和内容自身的 white-space 共同压制了换行条件。调试时优先检查子项 computed 样式，而不是反复加类。
