bootstrap 5 css不生效主因是bootstrap.min.css未加载，需先检查network面板是否返回200；常见原因包括路径错误、cdn被markdown渲染、协议混用、rel="stylesheet"拼写错误、link顺序颠倒、类名或html结构不规范及css变量未正确配置。
Bootstrap 5 的 CSS 样式不生效，90% 是 bootstrap.min.css 根本没加载进浏览器——不是你类名写错，而是文件压根没拿到。
检查 Network 面板里 bootstrap.min.css 是否返回 200
打开开发者工具（F12）→ 切到 Network → 刷新页面 → 筛选 css → 找 bootstrap.min.css 这一行。状态码不是 200？那不用往下看了。
-
404：路径写错，比如href="css/bootstrap.min.css"，但实际在static/css/下，漏了static/ -
403或failed：CDN 链接被 Markdown 渲染过，例如写成[Bootstrap](https://cdn...)，浏览器会请求http://localhost:8000/[https://...]，必然 404 - 协议混用：HTTPS 页面里引用 HTTP 的 CDN，现代浏览器直接拦截（Mixed Content）；反之 HTTP 页面加载 HTTPS 资源一般不拦，但某些旧环境会
-
rel="stylesheet"拼错是静默失败的元凶：必须是stylesheet（两个 t，无 y）。写成sytlesheet、styleSheet或css，浏览器直接忽略，不发请求、不报错、不提示
bootstrap.min.css 必须在自定义 CSS 之前引入
CSS 层叠规则里，后加载的样式赢。如果你的 style.css 在 bootstrap.min.css 前面，那所有 .btn { color: red; } 都会盖掉 Bootstrap 的默认颜色。
- ✅ 正确顺序：
<link href="bootstrap.min.css">→<link href="style.css"> - ❌ 错误顺序：
<link href="style.css">→<link href="bootstrap.min.css"> - 构建工具（Vite/Webpack）里用
@import或import引入 CSS，最终顺序仍以 HTML 中<link>实际位置为准，不是 JS 或 SCSS 里的import顺序
类名和 HTML 结构是否严格符合 Bootstrap 5 规范
Bootstrap 5 对类名和结构是硬性匹配，错一个字符、少一层嵌套，样式就断连。
-
.carousel-item是固定写法，不是.c-item、.item或.carousel__item - 栅格必须严格三层：
<div class="container"><div class="row"><div class="col-6">，缺 <code>row或把container塞进row里，flex 布局就失效 - 表单验证要加
novalidate或was-validated到<form></form>上，否则所有:invalid和.is-invalid相关样式都不触发 -
.float-right已被移除，得用.float-end；.text-center依然有效，但语义和行为已随 flex 默认值变化 - 只设
--bs-primary: #e74c3c，但漏掉--bs-primary-rgb: 231, 76, 60，那所有带透明度、阴影、渐变的地方都会 fallback 到默认蓝 -
--bs-primary-rgb必须手动设置，浏览器不提供 HEX 自动转 RGB 的能力 - 深色模式（
data-bs-theme="dark"）需单独配置--bs-primary-dark-rgb等变量 - 变量声明必须在
bootstrap.min.css加载之后、自定义 CSS 之前注入，否则会被其覆盖
为什么改了 CSS 变量却没变色
Bootstrap 5 的组件样式大多不直接读取 --bs-primary，而是依赖派生变量（如 --bs-primary-rgb）或 Sass 编译时的静态值。
最常被忽略的一点：你以为改的是样式，其实是在调试资源加载链、选择器权重、伪类触发条件和变量穿透路径——四个环节只要一个断开，就全白搭。
