bootstrap 5 默认栅格基于 flexbox，非 css grid；所谓“grid 系统”仅在启用 $enable-cssgrid: true 后提供实验性 .grid 和 .g-col-* 类，换行问题源于 grid 规范本身约束及 min-width: auto 等属性共同作用。
Bootstrap 5 根本没有“CSS Grid 系统”
这是最常被误解的前提：Bootstrap 5 默认栅格是基于 flexbox 的，不是 CSS Grid。它不提供 .grid 类或原生 Grid 布局能力，除非你主动启用实验性功能。所谓“CSS Grid 系统无法换行”，大概率是你在用 display: grid 自定义布局，却误以为那是 Bootstrap 内置行为。
如果你确实启用了 Bootstrap 5.2+ 的 CSS Grid 支持（即设置了 $enable-cssgrid: true），那它只是提供了一套额外的工具类（如 .grid、.g-col-6），底层仍是标准 CSS Grid —— 换行问题和 Bootstrap 无关，而是 Grid 规范本身的约束导致的。
Grid 项不换行？先查 min-width: auto
CSS Grid 中，每个网格项默认有 min-width: auto，它的计算值等于内容的最小固有宽度（比如一个超长 URL）。此时即使父容器宽度有限，浏览器也会优先满足这个最小宽度，导致 overflow-wrap: break-word 完全失效。
- 必须显式重置：
min-width: 0是最直接有效的解法 - 替代方案：
overflow: hidden作用于文本元素自身，也能隐式触发min-width: 0 - 别只加
overflow-wrap: break-word—— 没有min-width: 0或overflow: hidden，它基本不起作用
white-space: nowrap 正在偷偷压制换行
尤其在卡片、表格标题或自定义组件中，Bootstrap 或你自己的重置样式可能给文本容器加了 white-space: nowrap。它会彻底禁用所有换行机会，包括空格、连字符、甚至 overflow-wrap 允许的断点。
- 先检查浏览器开发者工具里该元素是否继承了
white-space: nowrap - 覆盖它：
white-space: normal必须写在同级或更高权重规则中 - 如果内容含长英文/哈希串，还需配
word-break: break-word，否则单个单词仍不折
你真需要 Grid 换行，还是只是想让 flex 列按内容折行？
很多人说“Grid 不换行”，实际是在 .row 里放了多个 .col，期望它们像 inline-block 一样按内容宽度自动折行——但 Bootstrap 5 的 .col 默认是 flex-basis: 0; flex-grow: 1，强制均分整行，根本不会“看内容宽度决定是否换行”。
- 要实现内容宽度驱动的折行，得换用
.col-auto+flex-shrink-0+.row.flex-wrap - 别混用
.col-md-4和.col-auto，后者会覆盖前者设置的flex-basis - 如果目标是响应式折行（比如只在 md+ 屏幕才允许换行），Bootstrap 不提供
flex-wrap-md这类工具类，得靠内联样式或自定义 CSS
真正容易被忽略的是：换行行为从来不是单一属性控制的，而是 min-width、white-space、flex-basis、overflow-wrap 四者共同作用的结果。改其中一个，往往得同步调其他三个，否则就会出现“明明加了 break-word 却还是溢出”的情况。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
