bootstrap css在react中未生效，首要排查network面板404确认是否加载成功，再检查elements面板类名是否存在及styles中属性是否被划掉，最后验证导入顺序、作用域隔离与构建工具优化干扰。
Bootstrap CSS 在 React 项目里“没生效”，绝大多数情况不是代码写错了，而是样式根本没加载进来，或者加载了但被悄悄盖掉了。先别改类名、别加 !important，先确认它是不是真被浏览器拿到了。
检查 Network 面板有没有 404
打开浏览器开发者工具 → Network 标签页 → 刷新页面 → 搜索 bootstrap.min.css 或 bootstrap.css：
- 如果状态码是
404，说明路径错了：可能是import 'bootstrap/dist/css/bootstrap.min.css'写在了错误的文件里（比如没在index.js或main.jsx入口），也可能是你用的是 Vite/Next.js 等工具，node_modules路径没被正确解析 - 如果是
200但样式仍不显示，说明文件加载成功，问题出在层叠或作用域上 - CDN 引入时，检查
href值是否带了 Markdown 符号（比如[bootstrap](https://...)），这会让浏览器当成相对路径请求本地地址
看 Elements 面板里 class 是否真的存在
右键页面任意按钮 → “检查” → 在 Elements 面板中找到对应 DOM 节点：
- 确认元素上有
btn、btn-primary这类类名 —— 如果没有，说明你写的类名拼错了（比如text-center写成text-cener），或组件没按 Bootstrap 结构嵌套（例如Dropdown缺少data-bs-toggle="dropdown"属性） - 展开 Styles 面板，看
background-color、padding等属性是否被划掉（strikethrough）；如果被划掉，点击右侧来源链接，就能看到是哪条规则赢了 - 特别注意：React 组件里用了
className="btn btn-primary"，但父组件或全局样式里写了.my-card .btn { background: red; }，这种更具体的选择器会直接干掉 Bootstrap 的默认色
确认 CSS 导入顺序和作用域
Bootstrap 的 CSS 必须在自定义样式之前加载，否则你的规则会优先被解析，但权重不够就赢不了：
- 入口文件（如
main.jsx）中，import 'bootstrap/dist/css/bootstrap.min.css'必须出现在你自己的 CSS / SCSS import 之前 - 如果用了 CSS Modules（
Button.module.css），里面的类名会被自动哈希，btn这种全局类不会被影响，但你自己写的.custom-btn不会自动获得 Bootstrap 样式 —— 这不是失效，是设计如此 - 在
create-react-app中用styled-components或emotion，它们插入的 style 标签默认在head最后，容易压过 Bootstrap；可手动用StyleSheetManager控制插入位置
警惕构建工具的“静默优化”
某些框架（如 Next.js、Vite + UnoCSS/PurgeCSS）会在构建时删掉“未使用”的类名：
- 你在 JSX 里写了
className="mb-4 text-lg font-bold"，但这些类在源码中没被 JS 显式引用，PurgeCSS 可能直接剔除对应 CSS 规则 - 临时验证：把
purgeCSS相关配置注释掉，或在tailwind.config.js（如果你混用了 Tailwind）里加content: ['./src/**/*.{js,jsx,ts,tsx}'] - Bootstrap 5.3+ 支持 CSS 自定义属性（
--bs-primary），但旧版构建流程可能不识别，导致变量替换失败
真正卡住人的地方，往往不是“怎么写”，而是“谁先加载、谁后解析、谁被删了、谁根本没进浏览器”。Network 和 Elements 面板比文档更诚实。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
