Bootstrap中.d-flex容器默认flex-wrap:nowrap，必须显式添加.flex-wrap类才能换行；.row则默认启用flex-wrap:wrap，无需额外设置。
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"> <li>反向换行（最后一行在最上）：<code><div class="d-flex flex-wrap-reverse"> <p>⚠️ 注意：<code>.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;"> <li>或加轻量自定义类：<code><div class="badge text-break force-wrap">，其中 <code>.force-wrap { white-space: normal !important; } - 避免在
<pre class="brush:php;toolbar:false;"></pre>、<code>或.table-responsive内部直接套text-break，它们的white-space继承链会干扰断行逻辑 -
align-content-center：所有行整体在容器中垂直居中 -
align-content-between：首行贴顶、末行贴底、中间行等距分布 -
align-content-stretch（默认）：各行高度拉满容器，可能造成高度不一致
多行布局下 align-content 才管用
当容器设了
flex-wrap: wrap且子项实际换行后，align-items就失效了——它只控制单行内子项在交叉轴（比如垂直方向）的对齐，不管行与行之间怎么排布。这时真正起作用的是
align-content：这个细节极易被忽略：很多人调了半天
align-items发现没反应，其实是该切到align-content了。尤其在卡片网格、标签组这类多行布局中，它是控制视觉节奏的关键。 -
