bootstrap 5 的 .col 默认不自动换行，因 flex-basis: 0 和 flex-grow: 1 强制均分宽度；可靠方案是改用 css grid 的 auto-fit + minmax()，或在 flex 中用 .col-auto + flex-shrink-0。
Bootstrap 5 的 .col 类默认不会“按内容自动换行”，强行加 flex-wrap: wrap 到 .row 上也无效——这不是 bug，是设计使然。真正可控、可预测的自动换行，得绕开默认栅格逻辑，用更底层的 CSS 布局机制。
为什么 flex-wrap: wrap 在 .row 上不生效
因为 Bootstrap 5 的 .col 默认设了 flex-basis: 0 和 flex-grow: 1，它们会强制均分整行宽度，哪怕内容只有几个字，也会被拉伸填满。此时 flex-wrap 根本没机会触发——没有“空间不足”，哪来的“换行”？
-
.col-4、.col-md-6这类比例类会覆盖flex-basis，彻底锁死宽度行为 - 直接给
.row加flex-wrap: wrap但保留.col，结果仍是单行挤满，小屏文字溢出或高度塌陷 - 想靠 JS 计算宽度再动态增删 class？重且不可靠，移动端 resize 频繁时容易抖动
用 grid-template-columns: repeat(auto-fit, minmax()) 替代 flex 栅格
这是目前最干净、响应式最自然的方案，完全脱离 Bootstrap 的 .col 逻辑，只用原生 CSS Grid 控制换行行为。
- 在容器上写：
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; -
auto-fit表示“尽可能多放列”，空间不够就自动折到下一行；minmax(280px, 1fr)指定每项最小宽 280px，剩余空间均分 - 不用改 HTML 结构，把
<div class="col"> 直接换成 <code><div class="grid-item"> 即可（或复用 <code>.col但重置其 flex 属性） - 注意清除
.col原有width和margin：.grid-item { width: auto; margin: 0; } - 结构写成：
<div class="row d-flex flex-wrap"> <div class="col-auto flex-shrink-0">短文本</div> <div class="col-auto flex-shrink-0">长一点的内容</div> </div> -
.col-auto把flex-basis设为auto，列宽由内容决定；flex-shrink-0防止被压缩，确保内容完整显示 - 不能混用
.col-md-4或.w-50，它们会覆盖flex-basis: auto，让换行失效 - 小屏下若项太多，可用
max-width: 100%限制单个.col-auto宽度，避免撑破容器 - Grid 方案：加
align-items: start避免默认stretch拉高所有项 - Flex 方案：每个子项加
d-flex flex-column h-100，内部内容区用flex-grow-1推动文字撑满，按钮固定底部 - 无论哪种方案，
gap（或 Bootstrap 的g-3）必须统一，否则换行后间距不一致会放大错位感
用 .col-auto + flex-shrink-0 实现内容宽度驱动换行
如果必须保留在 Bootstrap 的 flex 体系内，就放弃“等分”思路，改用内容实际宽度作为换行依据。
别忽略容器高度与子项对齐问题
自动换行后，卡片/列表项高度不一致，视觉上依然错位——这和换行机制无关，而是布局约束缺失。
真正难的不是写出能换行的代码，而是判断该用 Grid 还是 Flex、何时该弃用 .col、以及如何让换行后的高度和间距保持可信的一致性。这些细节不处理，响应式就只是“能缩放”，而不是“看起来对”。
