直接 import 本地 bootstrap css 文件会出三个问题：缺少 @popperjs/core 导致下拉菜单等定位失败；与 react 渲染生命周期冲突使 data-bs-toggle 失效；未经 postcss 处理可能缺失旧浏览器兼容前缀。
直接 import 本地 Bootstrap CSS 文件会出什么问题
直接把下载好的 bootstrap.min.css 放进 src/assets/css/ 然后 import './assets/css/bootstrap.min.css'，看似可行，但实际埋了三个坑：
- 缺少
@popperjs/core会导致Dropdown、Tooltip、Popover的定位计算失败，控制台报Cannot read properties of undefined (reading 'offsetParent') - Bootstrap JS 组件（如
Modal）依赖的 DOM 结构和初始化时机，与 React 的渲染生命周期不兼容——data-bs-toggle在挂载后不会自动生效 - 本地 CSS 文件若未经 PostCSS 处理（比如没启用
autoprefixer），在旧版浏览器中可能丢失 Flex/Grid 前缀，导致栅格错位
npm install bootstrap @popperjs/core 是唯一可靠路径
本地文件引入绕不开构建链路缺陷，而 npm 安装能确保三件事同时到位：
-
bootstrap包里自带已处理的dist/css/bootstrap.min.css和dist/js/bootstrap.esm.js -
@popperjs/core被正确 peer 依赖，版本匹配有保障（Bootstrap 5.3+ 要求@popperjs/core@^2.11.8） - Webpack/Vite 能识别
node_modules/bootstrap/scss/下的源文件，方便后续按需编译定制主题
执行命令必须包含两者：npm install bootstrap @popperjs/core。漏掉后者，90% 的交互组件会静默失效。
React 中用原生 Bootstrap JS 组件的致命陷阱
你写了个 <div ref="{modalRef}" class="modal">...</div>，然后在 useEffect 里调 new bootstrap.Modal(modalRef.current) —— 这只是起点，不是终点：
- 不能在每次
props变化时重建实例，否则触发Cannot construct a Modal without a valid target - 必须手动调用
modal.show()/modal.hide()，不能靠data-bs-show控制；React 状态变更后，得同步调方法，否则 UI 脱节 - 未在 cleanup 函数里执行
modal.dispose()，会造成 DOM 节点残留和事件监听器泄漏 - 如果 modal 内容是动态渲染（比如带
useState的表单），实例化后状态更新不会反映到已挂载的 DOM 上，得手动modal.handleUpdate()
react-bootstrap vs 原生 Bootstrap：选哪个取决于你是否需要“状态驱动”
如果你的 Modal 是否显示由 show prop 控制、按钮禁用态靠 disabled prop 同步、所有交互都走 onHide/onClick 回调——那 react-bootstrap 是更稳的选择：
- 它不依赖全局 CSS 类名污染，也不 require
@popperjs/core（内部封装了定位逻辑） - 所有组件都是纯函数式 + hooks 风格，支持 SSR、TypeScript 类型推导、服务端预渲染
- 但它的包体积比裸用 CSS 大约多 30–40kB（gzip 后），且无法直接复用你已写的
btn btn-outline-success这类 class 字符串 - 如果你项目里已有大量手写 Bootstrap class 的 JSX，强行切
react-bootstrap会带来重写成本，不如保留原生 +useRef + useEffect手动桥接
真正容易被忽略的是：无论选哪条路，bootstrap/dist/css/bootstrap.min.css 都必须在入口文件顶部 import，且不能被 CSS Modules 或 modules: true 规则拦截——否则类名根本不会生效。
