Bootstrap中.row默认flex-wrap:wrap可自动换行，而.d-flex默认nowrap需手动加flex-wrap类；非row容器启用换行须用flex-wrap响应式类；.col-auto+flex-shrink-0组合实现内容自适应宽度与换行。
flex-wrap 在 Bootstrap 中的默认行为
Bootstrap 的 .row 类默认就启用了换行，因为其 CSS 包含 flex-wrap: wrap。这意味着只要子元素总宽度超出容器，它们就会自动折到下一行——你不需要额外加类，也不用写自定义 CSS。
但这个默认只对 .row 有效；如果你用 .d-flex 手动创建弹性容器，它默认是 flex-wrap: nowrap（不换行），此时内容会横向挤压甚至溢出。
- ✅ 正确触发换行：
<div class="row"><div class="col">...</div></div> - ❌ 不会换行（除非显式加）：
<div class="d-flex"><div>...</div></div>→ 需补flex-wrap类 - ⚠️ 注意：
.col类本身带flex-basis: 0和flex-grow: 1，和flex-wrap共存时可能让列宽“均分后又换行”，视觉上不如.col-auto可控
如何在非 row 容器中启用 flex-wrap
当你用 .d-flex 做自定义布局（比如工具栏、筛选项组），又希望内容超宽时自动换行，就得手动加 wrap 类。
Bootstrap 5 提供了响应式封装类：.flex-wrap、.flex-wrap-sm、.flex-wrap-md 等，但注意：这些类名在官方文档中存在，实际 CSS 文件里是否生成，取决于你用的是完整版还是自定义构建版（精简版可能剔除未用断点）。
- 基础换行：
<div class="d-flex flex-wrap">...</div> - 仅在中屏及以上换行：
<div class="d-flex flex-wrap-md">...</div> - 反向换行（最后一行在最上面）：
<div class="d-flex flex-wrap-reverse">...</div> - 禁用换行（强制单行）：
<div class="d-flex flex-nowrap">...</div>
别依赖 .flex-wrap-md 一定能生效——建议用浏览器 DevTools 检查最终渲染的 style 是否包含 flex-wrap: wrap，否则得回退到内联样式或自定义 CSS。
flex-wrap + col-auto 是解决“内容驱动宽度”的关键组合
很多人想让每列宽度由文字/图标长度决定，又允许换行，结果套用 .col-3 或 .col-md-4 后发现列被强行拉宽、文字换行、布局错乱——这是因为固定比例类会覆盖 flex-basis，破坏内容自适应逻辑。
真正可控的做法是放弃比例列，改用 .col-auto + flex-shrink-0：
<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阻止浏览器压缩该列（否则小屏幕下会被 squeeze 变形） -
.row.d-flex.flex-wrap提供换行容器，且不干扰子项 flex 基础行为 - ⚠️ 切忌混用：
.col-6和.col-auto在同一行里会导致计算冲突，Flex 会按权重规则 fallback，结果不可预测
flex-wrap 的性能与兼容性隐患
换行本身开销极小，但问题常出在“换行判定时机”和“重排连锁反应”上。
例如：你在 JS 中动态插入一堆 .col-auto 元素，又没控制最大宽度，浏览器要反复测量每项内容尺寸、判断是否溢出、重新分配行高……在低端设备或大量节点时，可能引发卡顿。
- 避免无限制添加：给容器设
max-width或用flex-basis限宽数值（如flex-basis: 200px） - IE 11 及更早版本不支持
flex-wrap（只认-ms-flex-wrap），Bootstrap 4+ 已放弃 IE 支持，但若项目仍需兼容，得加 polyfill 或降级方案 - SSR 场景下，服务端渲染时无法获知视口宽度，
.flex-wrap-sm类可能在首屏失效，需配合 hydration 后 JS 补正
最易被忽略的一点：flex-wrap 换行后，align-items 对齐的是“每行内部”，不是整个容器；如果各行高度差异大，又用了 align-items: center，会出现各行内容上下错位——这时该用 align-content: center 控制行与行之间的对齐。
