Bootstrap 5 中 flex-wrap: wrap 不生效是因为 .col 默认 flex-basis: 0 + flex-grow: 1 强制占满行宽；需改用 .col-auto（flex-basis: auto）+ flex-shrink-0 + .row.flex-wrap 才能按内容宽度自动折行。
为什么 flex-wrap: wrap 在 Bootstrap 5 中不生效？
因为 Bootstrap 5 的栅格列（.col）默认是 flex-basis: 0 + flex-grow: 1，它们会强行撑满容器宽度，哪怕内容极小，也不会“主动让出空间”来触发换行。直接加 flex-wrap: wrap 到 .row 上，列依然挤在同一行，除非你手动缩小视口或缩放浏览器——这不是预期行为。
真正起作用的不是加 flex-wrap，而是**控制列的 flex 基础尺寸和收缩行为**：
-
flex-basis决定列“想占多宽”，设为auto或具体值（如200px）才能让内容宽度主导布局 -
flex-shrink: 0防止列被压缩到无法显示内容的程度，为换行创造条件 -
flex-wrap: wrap必须加在.row上，但只是“允许换行”，不是“强制换行”
如何让 Bootstrap 列按内容宽度自动折行？
最简方案：给列添加 .col-auto + 手动设置 flex-wrap 和 flex-shrink：
<div class="row d-flex flex-wrap"> <div class="col-auto d-flex flex-shrink-0">短文本</div> <div class="col-auto d-flex flex-shrink-0">稍长一点的内容</div> <div class="col-auto d-flex flex-shrink-0">非常非常长的内容项</div> </div>
关键点：
立即学习“前端免费学习笔记（深入）”；
-
.col-auto把flex-basis设为auto，列宽由内容决定 -
flex-shrink-0确保列不被压缩，内容不会被截断或折叠 -
d-flex flex-wrap应用于.row，启用弹性换行 - 避免混用
.col-md-4这类固定比例类，它们会覆盖flex-basis: auto
响应式折行：在特定断点下才启用 wrap
Bootstrap 本身不提供 flex-wrap-md 这类工具类，需自定义 CSS 或用内联样式：
<div class="row" style="flex-wrap: nowrap; flex-wrap: wrap;"> <div class="col-auto flex-shrink-0">项</div> <div class="col-auto flex-shrink-0">项</div> </div>
更可靠的做法是写媒体查询：
@media (max-width: 768px) {
.row-wrap-on-sm {
flex-wrap: wrap !important;
}
.row-wrap-on-sm > [class*='col-'] {
flex-shrink: 0 !important;
}
}
然后使用：<div class="row row-wrap-on-sm">。注意：不要依赖 <code>!important 覆盖 Bootstrap 的 .col 默认 flex 规则，否则在大屏下可能意外换行。
常见错误：误用 flex-wrap 导致列高度不一致
当列内容高度差异大、又启用了 flex-wrap，新行的列会从“当前行最高列的底部”开始对齐，造成视觉错位。这不是 bug，是 Flexbox 的 align-content 默认行为。
修复方式（加在 .row 上）：
-
align-items: flex-start：所有列顶部对齐（最常用） -
align-content: flex-start：多行时，行与行之间顶部对齐 - 慎用
align-items: stretch（Bootstrap 默认），它会让所有列等高，反而加剧折行后的参差感
实际中，align-items: flex-start 几乎总是比默认值更可控——尤其当你列里有按钮、卡片或不同行数的文本时。
折行逻辑本身简单，但 Bootstrap 的栅格默认行为和 Flexbox 的隐式规则叠加后，容易让人以为加个 wrap 就完事。真正要调的是三处：列的 flex-basis、是否允许收缩、以及行容器的对齐策略。
