根本原因是布局模型、选择器权重和变量体系全部不兼容：bootstrap 3依赖float+负边距，bootstrap 5基于flexbox，混用导致.row塌陷、列错位、工具类失效、data属性不识别、js组件静默失效。
Bootstrap 3 和 Bootstrap 5 的 CSS 不能混用，根本原因是布局模型、选择器权重和变量体系全部不兼容
直接在页面里同时引入 bootstrap.min.css（v3）和 bootstrap.min.css（v5），不是“样式打架”，而是两套完全不同的 DOM 布局契约在争夺控制权——结果必然是部分组件错位、间距错乱、JS 组件静默失效。
flex 与 float 混合导致 .row 高度塌陷和列错位
Bootstrap 3 的 .row 依赖 float: left + 负边距模拟栅格；Bootstrap 5 的 .row 是 display: flex 容器，子元素 .col 是 flex item。两者共存时：
-
.row的 computeddisplay可能是flex，但内部.col若被 v3 规则设了float: left，就会脱离文档流，.row高度塌陷 - v5 的
flex: 1或flex-basis计算完全忽略浮动子项，列宽不再按预期分配 - v3 的
.row-no-gutters手动清除负边距，和 v5 的--bs-gutter-x叠加，列间距可能变成 -15px + 1.5rem，视觉上严重偏移
工具类命名冲突让 margin/padding/文本对齐全部失效
v3 的 ml-3、pull-right、text-left 在 v5 中已被移除或重定义，而 v5 新增的 ms-3、float-end、text-start 在 v3 CSS 里根本不存在。混用时：
- 旧 HTML 写了
class="ml-3"，v3 CSS 会生效，v5 CSS 忽略；但若同时加载 v5，它的ms-3规则不会覆盖 v3 的ml-3（因为选择器不同），造成“看似有 class 却没效果” - v3 的
.btn-default和 v5 的.btn-secondary语义不同、颜色值不同，且 v5 已删掉btn-default，浏览器匹配失败后回退到原生 button 样式 - 断点前缀逻辑不一致：
col-xs-6（v3）在 v5 中无对应类，而col-6（v5）在 v3 中无定义，栅格结构直接断裂
JS 组件因 data 属性和挂载方式不兼容而静默失效
Bootstrap 5 彻底废弃 data-toggle、data-target，改用 data-bs-toggle；同时移除 jQuery 依赖，所有组件初始化方式改为原生 JS。混用时：
- 写
data-toggle="modal"的按钮，v5 的 JS 完全不监听，点击无反应；v3 的 JS 又可能因 v5 的.modal结构变更（如缺少.modal-dialog包裹）而初始化失败 - v5 的 Modal 默认 append 到
document.body，若页面存在 v3 的自定义 container 逻辑，弹窗可能渲染在不可见区域 - 第三方插件（如
bootstrap-select）若未声明支持双版本，会根据检测到的 Bootstrap 版本选择一套类名和事件绑定，但 DOM 实际结构却是混合的，导致下拉菜单不展开、选项不可选
真正麻烦的不是“样式没出来”，而是错位、塌陷、交互失效这些现象往往没有控制台报错，只在特定断点或用户操作后才暴露——最易被忽略的是 JS 组件挂载容器和 data 属性的隐式耦合，它不像 CSS 那样能一眼看出冲突。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
