Bootstrap 5 的 d-flex 默认启用 flex-wrap: wrap，与 v4 的 d-flex + flex-nowrap 行为不同，易导致意外折行；需显式加 flex-nowrap 还原旧行为，且 flex-grow/shrink 类不支持响应式前缀。
Flex容器类默认行为变了：d-flex 自动启用 flex-wrap: wrap
Bootstrap 5 的 d-flex 不再等价于 v4 的 d-flex + flex-nowrap。它默认开启换行，这在响应式列布局中容易导致意料之外的折行——尤其当你把多个 .col 放进一个没设 flex-nowrap 的 .d-flex 容器里时。
常见错误现象：v4 下正常横排的工具栏，在 v5 里突然“断成两行”，控制台看不出样式冲突，其实是 d-flex 默默加了 wrap。
- 要还原 v4 行为，必须显式加
flex-nowrap - 若需垂直方向堆叠且不换行，用
d-flex flex-column即可，无需额外处理 -
d-inline-flex行为未变，仍保持内联+不换行特性
对齐类参数粒度更细，align-items 和 justify-content 拆开命名
v4 的 align-items-center、justify-content-between 在 v5 里依然可用，但新增了一套更明确的别名：比如 align-self-center 只作用于单个子项，而 justify-content-md-center 支持断点响应式控制——这点 v4 不支持。
使用场景：你正在做一个卡片网格，想让中屏以上居中对齐、小屏左对齐，v4 只能靠媒体查询或 JS 切换类；v5 直接写 justify-content-start justify-content-md-center 就行。
立即学习“前端免费学习笔记（深入）”；
- v5 新增
align-content-*类（如align-content-around），v4 没有对应实现 -
justify-content系列类现在支持全部 6 个断点（xs～xxl），v4 最多到xl - 注意：v5 中
justify-content-center在.row上可能被父级text-center干扰，优先检查是否误用了文本对齐类
flex-direction 工具类支持响应式前缀，但 flex-grow/flex-shrink 不能
v5 给 flex-row、flex-column、flex-row-reverse 全部加上了响应式前缀，比如 flex-md-column 表示“中屏及以上竖排”。但 flex-grow-1、flex-shrink-0 这类尺寸控制类**不支持断点前缀**——它们永远全局生效。
容易踩的坑：有人试图写 flex-grow-md-1，结果无效；浏览器会直接忽略这个类，控制台也不报错。
- 想实现“小屏不伸缩、大屏才伸缩”，得用两个类组合：
flex-grow-0 flex-lg-grow-1 -
flex-fill在 v5 中语义更清晰：它等价于flex: 1 1 auto，比 v4 的隐式行为更可控 - v4 的
flex-0（等同于flex: 0 0 auto）在 v5 中已移除，改用flex-shrink-0+flex-grow-0
间距类从 .g-* 升级为 .gy-*/.gx-*，但旧写法仍兼容
v5 把栅格间距拆成独立的垂直（gy）和水平（gx）控制，.g-3 是两者兼顾的快捷写法。虽然 .g-3 在 v5 里仍能用，但如果你只想要垂直间距、不想影响水平间隙，就必须用 .gy-3。
性能影响：用 .gy-3 比 .g-3 多一次 CSS 属性匹配，但实际渲染无差异；真正要注意的是兼容性——老版本 Safari 对 gap 支持弱，v5 默认用 gap 实现，若需支持 iOS 13.3 以下，得加回 margin 降级逻辑。
-
.row默认带gap，所以.g-0必须显式写，否则列间总有 1rem 间隙 - 想全局关掉所有
gap，可在:root设置--bs-gutter-x: 0; --bs-gutter-y: 0; - v4 的
.row-no-gutters已彻底删除，别再在 v5 里尝试
最易被忽略的一点：v5 的 Flex 工具类依赖 CSS 自定义属性（如 --bs-gutter-x）驱动，如果项目里覆盖了这些变量但没同步更新 $spacers Sass map，gy-5 可能输出 3rem 而不是预期的 3.5rem——这类问题不会报错，只能靠视觉校验或 DevTools 查看计算值。
