Bootstrap CSS没生效主因是bootstrap.min.css未加载，需检查Network面板是否返回200；常见原因包括CDN链接格式错误、本地路径错误、协议混用、rel="stylesheet"拼写错误、link顺序颠倒及类名或HTML结构不规范。
Bootstrap 的 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" 拼错是静默失败的元凶
浏览器对 rel 属性值严格匹配，只认 stylesheet（两个 t，无 y）。写成 sytlesheet、styleSheet 或 css，浏览器直接忽略，不发请求、不报错、不提示。
- 右键“查看页面源代码”，搜索
<link>，肉眼核对拼写 - VS Code 输入
<link rel=""> 会自动补全为 <code>stylesheet，善用这个提示 - Network 面板里完全看不到你的 CSS 文件？先查这个
bootstrap.min.css 在自定义 CSS 之后引入
Bootstrap 的规则被覆盖，不是 bug，是 CSS 层叠逻辑的必然结果。浏览器按 <link> 在 HTML 中的顺序应用样式，后加载的赢。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误顺序：
<link href="style.css">→<link href="bootstrap.min.css"> - ✅ 正确顺序：
<link href="bootstrap.min.css">→<link href="style.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相关样式都不触发 - Tooltip 默认挂载到触发元素的最近定位祖先下，如果那个祖先有
overflow: hidden，tooltip 就被裁掉 —— 加data-bs-container="body"强制挂到body下
真正难排查的，是那些“看起来加载了、选择器也对、但就是不生效”的情况：比如自定义变量在 Sass 里改了却没编译进输出，或者 scoped 样式里想覆盖 .btn 却作用不到全局类上。这些地方没有银弹，得一层层看 computed styles、确认 DOM 实际结构、盯紧构建产物路径。
