Bootstrap 3 与 Flex 布局天然互斥，因其栅格依赖 float + 负 margin，而 Flex 容器会忽略 float、破坏 .row 高度计算，导致列错位、卡片对齐失效及 JS 组件静默失效。
Bootstrap 3 的 CSS 在 Flex 布局页面中容易冲突，根本不是“样式没写对”，而是它压根不认 Flex 容器那套规则——它的栅格、卡片、按钮全按 float + 负 margin + 清除浮动那一套设计，和 display: flex 天然互斥。
Flex 容器里 .row 高度塌陷、列错位
Bootstrap 3 的 .row 依赖 float: left 和 margin-left: -15px 模拟栅格；而你给父容器加了 display: flex 后，.row 自身若没显式设 width 或 flex-basis，就会收缩到内容宽，内部浮动子项（.col-md-6）直接脱离文档流，导致 .row 高度为 0。
-
.row在 flex 容器中默认是flex-item，但没设flex: 1，它就不占空间 -
.col-*上的float: left和width在 flex 环境下被忽略或部分失效 - 常见现象：两列并排变叠在一起、右侧列消失、边框/阴影错位
.card 强制 column 方向破坏图文右对齐
Bootstrap 3 虽无原生 flex-direction: column，但很多项目会手动加该声明来“现代化”卡片；一旦 .card 变成 flex 容器且方向为 column，.card-body 和 .card-media 就只能上下堆叠——你写的 float: right 直接被无视，图片永远在文字下方。
- 检查 computed styles：如果
.card的display是flex且flex-direction是column，float就失效 - 修复不是删掉 flex，而是重置：
.card { display: block !important; }，再用inline-block+vertical-align控制左右 - 别依赖
float同时又给父级加flex，这是自相矛盾的布局指令
工具类命名与行为完全错位
Bootstrap 3 没有 ms-3、align-items-center、d-flex 这些类，你混着用只会让开发者工具里一堆划掉的声明。
立即学习“前端免费学习笔记（深入）”；
- 写了
class="ml-3"，但页面同时加载了 Bootstrap 5 的 CSS，ml-3规则存在，ms-3却没生效——因为它们是两套独立选择器，互不覆盖 -
.btn-default在 Bootstrap 3 中存在，在 5 中已被移除；若 JS 组件检测到 v5，可能跳过初始化，导致点击无反应 - 断点类如
col-xs-6在 Flex 页面中若没对应媒体查询兜底，就会退化为display: block，整行崩掉
JS 组件因 DOM 结构变更静默失效
Bootstrap 3 的 Modal、Dropdown 依赖 data-toggle 和特定 DOM 结构（比如 .dropdown-menu 必须紧贴 .dropdown）；Flex 布局常打乱嵌套层级或插入 wrapper 元素，JS 找不到目标节点就放弃执行。
- 常见表现：下拉菜单不展开、Tab 切换卡死、Collapse 点击无反应
- 不是 JS 报错，而是匹配失败后静默退出——控制台看不到错误，但 Elements 面板里
.show类根本没加上 - 尤其注意动态插入的内容（如 Vue
v-for渲染的卡片），JS 初始化早于元素挂载，事件绑定就漏掉了
真正难处理的不是让某一行样式生效，而是确保所有由 JS 动态生成的结构（Modal、Tooltip、Dropdown-menu）也落在你可控的 flex 上下文里——它们默认 append 到 document.body，一出来就脱离你的布局容器，样式和行为全断联。
