Bootstrap 5 CSS未加载的主因是bootstrap.min.css未成功加载，需检查Network面板中该文件是否返回200；常见原因包括CDN链接格式错误、本地路径错误、协议混用、link标签顺序颠倒、类名或HTML结构不规范、CDN失效等。
Bootstrap 5 的 CSS 样式没加载，90% 是 bootstrap.min.css 根本没进浏览器，不是你写错了类名。
检查 Network 面板里 bootstrap.min.css 是否返回 200
打开开发者工具（F12）→ Network → 刷新页面 → 筛选 css → 找到 bootstrap.min.css 这一行。如果状态码是 404、403 或直接显示 failed，说明文件压根没拿到。
- 常见诱因：把 CDN 链接误写成 Markdown 格式，比如
[Bootstrap](https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css)，浏览器会尝试请求本地路径http://localhost:8000/[https://...]，自然 404 - 本地路径错误：比如
href="css/bootstrap.min.css"，但实际文件在static/css/下，少写了static/ - 协议混用：HTTP 页面里引用了 HTTPS 的 CDN，某些旧环境会拦截；或反过来，在 HTTPS 页面里加载 HTTP 资源，被浏览器主动阻止（Mixed Content）
<link> 标签顺序错乱导致样式被覆盖
Bootstrap 的 CSS 必须在所有自定义 CSS 之前加载，否则你的 .btn { color: red; } 会盖掉 Bootstrap 的 .btn 默认颜色——不是“没生效”，而是被你自己的规则干掉了。
- ✅ 正确顺序：
<link href="bootstrap.min.css">→<link href="style.css"> - ❌ 错误顺序：
<link href="style.css">→<link href="bootstrap.min.css"> - 构建工具（如 Vite/Webpack）里用
import引入 CSS，最终打包顺序仍以 HTML 中<link>实际位置为准，不是 import 顺序
HTML 结构或类名拼写不符合 Bootstrap 5 规范
类名写错一个字符，样式就断连。Bootstrap 5 不认 .c-item、.carousel-item-active 或 .btn-primary-lg 这类“看着像”的变体。
立即学习“前端免费学习笔记（深入）”；
-
.carousel-item是固定写法，不是.c-item或.item -
.text-center在 v5 里依然有效，但.float-right已被移除，得用.float-end - 轮播图必须包裹在
<div class="carousel">→<div class="carousel-inner">→<div class="carousel-item active">三层结构里，缺一层，JS 可能不初始化，CSS 选择器也匹配不上
CDN 节点失效或国内访问受限
jsDelivr、UNPKG 等 CDN 并非永远可靠，尤其在国内网络环境下，某个节点可能被临时屏蔽或响应超时。
- 直接在浏览器地址栏粘贴
https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css，看能否下载到 CSS 内容 - 不行就换 CDN：推荐
https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css（BootCDN 对国内更友好） - 更稳妥的做法是加本地 fallback：先加载 CDN，检测
window.bootstrap是否存在，不存在再动态插入本地路径的<link>
真正卡住人的地方，往往不是“怎么写”，而是“根本没进来”——先盯死 Network 面板里的那个 404，比调一百遍 class 名都管用。
