bootstrap 5的.row默认flex但不自动等高，因overflow、absolute定位或图片未设max-width会破坏align-items: stretch；断点类.col-6全局生效，非仅xs；间距类升级为.gy-/gx-独立控制；.container-fluid默认带padding需手动px-0还原v4行为。
Bootstrap 5的.row默认是flex，但别信“自动等高”
很多人从v4切到v5后第一反应是“列怎么不等高了？”——其实不是不等高，而是.row虽默认display: flex，但若父容器有overflow: hidden、子列含position: absolute或图片没设max-width: 100%，就会破坏align-items: stretch的拉伸行为。v4需手动加d-flex，v5省了这步，但也更容易被意外样式覆盖。
常见踩坑点：
-
.row被第三方CSS重置为display: block（比如某些重置库或自定义reset.css） - 列内嵌套了
.container，导致max-width干扰Flex主轴计算 - 用了
height: 100%或min-height在.col-*上，强制截断拉伸
断点类名逻辑变了：.col-6不是“仅xs”，而是“所有尺寸”
v4中.col-6等同于.col-xs-6，只在超小屏生效；v5彻底移除xs前缀，.col-6表示“所有断点下都占6列”，即全局生效。这意味着：
- 原来靠
.col-md-6 .col-lg-4实现“中屏6列、大屏4列”的写法，现在必须显式写全.col-12 .col-md-6 .col-lg-4 - 漏写
.col-*会导致该列在最小尺寸下宽度为auto（内容撑开），而非预期的12列满宽 -
.col（无数字）在v5中仍表示“自动等分”，但内部flex: 1 1 0，若内容超长且无word-break，可能溢出
间距类从.g-*升级为.g-0～g-5，且支持垂直独立控制
v4用.g-0到.g-5统一控制行列间距，v5保留该体系但语义更细：现在.gy-3只管垂直间距，.gx-2只管水平间距，.g-4仍是两者兼顾。关键差异在于：
- v4的
.row-no-gutters在v5中必须写成.g-0，否则列间仍有0.5rem默认间隙 - v5的
$spacersSass map默认基于1rem，若你覆盖了$spacer变量但没同步更新$spacers，g-3可能变成1.5rem而非预期的1.5rem × 1rem缩放 - 嵌套
.row时，外层.g-3和内层.gy-2会叠加，不是覆盖关系
容器层级不再隐式处理padding，.container-fluid也带padding
v4中.container-fluid是纯width: 100%，左右无padding；v5统一为所有容器（包括.container-fluid）默认加padding-left/right: var(--bs-gutter-x, 1.5rem)。这意味着：
- 直接替换CDN后，页面左右可能突然多出空白——不是bug，是v5把栅格间距抽成了CSS变量
--bs-gutter-x - 想还原v4行为，得在根节点重设：
:root { --bs-gutter-x: 0; }，或给.container-fluid加px-0 -
.container的max-width断点值微调过（如lg从960px升到992px），若你用JS读取offsetWidth做响应式判断，需同步更新阈值
最易忽略的是CSS变量穿透问题：v5大量使用--bs-*变量控制栅格、颜色、圆角等，这些变量默认只在:root生效。如果项目用了Shadow DOM或scoped style，.row可能拿不到--bs-gutter-x，结果g-3完全不生效——此时得手动在组件内:host { --bs-gutter-x: 1.5rem; }。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
