bootstrap 5 与 4 的区别在于底层全面重构：data-属性强制加 bs- 前缀、js 移除 jquery 依赖改用 new bootstrap.xx()、.col-6 全尺寸生效、间距类和容器默认行为变更（如 .container-fluid 默认带 padding）。
Bootstrap 5 和 4 的区别不是“加了几个新组件”那么简单，而是底层依赖、CSS 逻辑、JS 调用方式全部重构。直接升级会大面积报错或样式错乱，尤其当你项目里还混着 jQuery 或自定义 Sass 变量时。
data-target 和 data-dismiss 全部加了 bs- 前缀
所有 data- 属性都强制加了 bs- 命名空间，否则静默失效，不报错也不工作。
-
data-target="#myModal"→ 必须改成data-bs-target="#myModal" -
data-dismiss="modal"→ 改成data-bs-dismiss="modal" -
data-toggle="dropdown"→ 改成data-bs-toggle="dropdown" -
data-dismiss="alert"在 alert 中彻底失效，必须用data-bs-dismiss="alert"
浏览器控制台不会提示，但点击没反应——这是最常被忽略的升级断点。
jQuery 调用全部失效，Modal/Dropdown/Toast 必须用 new bootstrap.XX()
$ 不再是函数，$(...).modal('show') 会直接抛 TypeError: $ is not a function。
- 旧写法：
$('#myModal').modal('show') - 新写法：
new bootstrap.Modal(document.getElementById('myModal')).show() - Dropdown、Toast、Tooltip 同理，全部要 new 实例再调方法
- 如果项目其他地方还依赖 jQuery（比如 DataTables），可以保留它，但 Bootstrap 自身不再需要它作为前提
别试图用 jQuery.noConflict() 换名绕过——Bootstrap 5 的 JS 文件根本不读 $ 或 jQuery 全局变量。
.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-12 .col-md-6 .col-lg-4 - 漏写
.col-*类，该列在手机上会变成width: auto，由内容撑开，不是预期的满宽 -
.col（无数字）仍表示等分，但内部是flex: 1 1 0，若内容不换行且无word-break，可能横向溢出
这个变化让响应式更直观，但也更容易因漏写类导致移动端布局崩塌。
间距类和容器默认行为变了，.container-fluid 也有 padding
v5 把栅格间距抽成 CSS 变量 --bs-gutter-x，所有容器（包括 .container-fluid）默认带左右 padding，.row 默认 display: flex 但不自动等高。
-
.row-no-gutters已废弃 → 改用.g-0 - 想单独控制垂直/水平间距：用
.gy-3（y-axis）、.gx-2（x-axis），不再是 v4 的统一.g-3 -
.container-fluid默认有padding-left/right: var(--bs-gutter-x)→ 若需还原 v4 行为，加px-0或重设::root { --bs-gutter-x: 0 } -
.row默认align-items: stretch，但图片没设max-width: 100%、子列含position: absolute或父容器有overflow: hidden都会导致等高失效
这些改动让定制更灵活，但也会让“看着没改什么，页面却变样了”的问题集中爆发——尤其是从 CDN 直接替换后发现左右多出空白、列高不一致。
