.d-flex容器默认flex-wrap:nowrap，必须显式添加.flex-wrap类才能换行；.row则默认启用flex-wrap:wrap，无需额外设置。
Bootstrap中.d-flex容器必须显式加.flex-wrap类
Bootstrap的.d-flex默认是flex-wrap: nowrap，不是“写了display: flex就自动换行”。你看到.row能换行，是因为它本身内置了flex-wrap: wrap；但.d-flex只是快捷设置display: flex，其余全靠手动补。
常见错误：只写<div class="d-flex"></div>，然后纳闷为什么子项横着溢出。解决方式很简单：
- 加
.flex-wrap：<div class="d-flex flex-wrap"> - 响应式控制：
.flex-wrap-sm（小屏起换行）、.flex-wrap-md（中屏起）等，但要确认你用的Bootstrap构建版本是否生成了这些类（DevTools里看computed style最准） - 别依赖
.d-flex自动继承.row行为——它们是两套逻辑，混用会失效
Bootstrap栅格列（.col）不换行，本质是flex-basis锁死了宽度
在.row里放.col-6或.col，即使加了flex-wrap: wrap，它们也大概率不换行。原因不是flex-wrap没生效，而是.col默认是flex: 0 0 0% + flex-grow: 1，强制占满整行，浏览器永远算出“还有空间”，换行条件永不触发。
想让列按内容宽度自动折行，得切换策略：
- 改用
.col-auto：它设flex-basis: auto，列宽由内容决定，为换行创造前提 - 配
flex-shrink-0：防止内容被压缩变形（比如按钮文字挤成一团） - 确保
.row本身有flex-wrap: wrap（即加.flex-wrap类，或直接用.row默认行为） - 避免混用
.col-md-4和.col-auto——固定比例类会覆盖flex-basis: auto，导致折行失效
子元素自身阻止换行：white-space和min-width是隐形开关
就算父容器flex-wrap: wrap生效、宽度受限、子项也用了.col-auto，文字或长URL仍可能不换行。核心干扰项有两个：
-
white-space: nowrap：Bootstrap的.btn、.badge、.breadcrumb-item都默认设了它。必须显式覆盖为white-space: normal，否则overflow-wrap: break-word完全无效 -
min-width: auto（默认值）：Flex规范规定子项最小宽度不能小于内容宽度，这会让长文本/图片死撑。解法是给子项加min-width: 0（Bootstrap无对应工具类，需自定义或内联） - 图片、
<input>等替换元素默认不缩放，记得加max-width: 100%和height: auto
移动端窄屏下换行错位，align-items和gap共同作用
换行后第二行子项高度不一致、图标对不齐，不是flex-wrap的问题，而是align-items和gap的组合效果被误读。
align-items: stretch（默认）会让所有子项拉伸到最高项高度，但如果某项内容少、高度矮，它会被拉高，反而显得“空”；而gap在多行Flex中会在行与行之间也生效，导致垂直间距过大。
- 统一高度：用
align-items: flex-start+ 给子项设min-height（尤其卡片、按钮） - 控制行间距：优先用
row-gap（如row-gap-3），别用align-content——它只在容器交叉轴有剩余空间时才起作用，height: auto下基本无效 - 慎用
.btn-block或.w-100：它们让按钮占满父宽，换行效果会被掩盖，需配合max-width才能观察到真实折行
真正卡住换行的，往往不是flex-wrap写没写对，而是父容器宽度被min-width锁死、子项flex-basis设成auto却忘了加min-width: 0、或者white-space: nowrap还静静躺在那里——这些点在开发者工具里一眼就能验，但容易被跳过。
