bootstrap css不生效90%以上是加载顺序或路径问题，需先检查network面板中bootstrap.min.css是否返回200状态码、路径是否正确、引入顺序是否在自定义css之前，并确认html结构符合bootstrap规范。
Bootstrap CSS样式不生效，**90%以上是加载顺序或路径问题，而不是代码写错了**。先别改类名、别加 !important，直接看浏览器 Network 面板里 bootstrap.min.css 是不是 200——不是就停在这里修。
检查 Network 面板是否真加载了 CSS 文件
这是最常被跳过的一步。很多人在 Elements 面板里看到元素有 .btn 类，就默认“CSS 肯定在”，但其实可能根本没发请求，或返回了 404/403。
- 打开开发者工具 → Network → 刷新页面 → 筛选
bootstrap.*css - 确认状态码是
200，且响应体里有大量.btn { ... }规则（不是空文件或 HTML 错误页） - 如果用的是本地路径（如
href="css/bootstrap.min.css"），右键 “Open in Sources” 看能否跳转到真实文件；不能说明路径错了一级或多级 - CDN 地址要完整可访问，比如
https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css必须能直接粘贴进浏览器地址栏打开
确保 bootstrap.css 在自定义 CSS 之前引入
Bootstrap 的工具类（如 .mb-3、.text-center）选择器权重很低，后加载的任意一个 .my-header .text-center 都能覆盖它。顺序错了，样式就“失效”了。
- HTML 中
<link>标签必须按这个顺序：<link href="bootstrap.min.css">→<link href="app.css"> - 在 Vue/React 项目中，不要在
public/index.html里用<link>引入 Bootstrap，而要在入口 JS（如main.js）顶部写：import 'bootstrap/dist/css/bootstrap.min.css'; - 如果用了 Sass 版本（
bootstrap/scss/bootstrap.scss），必须保证所有自定义变量（如$primary）在@import "bootstrap/scss/variables";之前声明，否则!default机制会让它们被忽略
排查 Shadow DOM 或 scoped 样式隔离干扰
在 Web Components、Vue SFC 或某些微前端场景下，Bootstrap 类不会自动穿透作用域——这不是 Bug，是设计如此。你写的 <button class="btn"></button> 在 shadow root 里，外部 CSS 根本看不到它。
- Web Components 中，不能靠
<link>引入 Bootstrap，得用adoptedStyleSheets：const sheet = document.querySelector('link[href*="bootstrap"]').sheet;<br>this.shadowRoot.adoptedStyleSheets = [sheet]; - Vue 单文件组件加了
scoped，里面的<style scoped></style>不会影响.container这类全局类；想覆盖它，得用:deep(.btn)（Vue 3）或>>>（Vue 2） - 不要在
<style scoped></style>里写.btn { color: red; }并指望它生效——它只会匹配你组件内部手动加了class="btn"的元素，而 Bootstrap 工具类本身不在你的组件模板里
验证 HTML 结构是否符合 Bootstrap 要求
类名拼对了，CSS 也加载了，结构不对照样白搭。尤其栅格、表单、导航栏这类依赖嵌套关系的组件，错一层就全崩。
-
.row必须是.container或.container-fluid的直接子元素；.col必须是.row的直接子元素。写成<div class="container"><div class="col"></div></div>就无效 - 响应式类（如
.col-md-6）只在对应断点及以上生效。小屏下看不到？检查当前视口宽度是否 ≥768px（md 断点） - Bootstrap 5+ 默认不带 jQuery，但如果你还在用旧版插件（如
data-toggle="tooltip"），JS 没加载成功会导致.show、.dropdown-menu这类动态类名不出现，看起来像“样式没生效” - 类名大小写和拼写必须严格匹配文档版本。Bootstrap 5 没有
.text-center（已改为.text-align-center），Tailwind 3+ 废弃了.flex-row——别凭记忆写
真正难排查的，往往不是“哪个地方漏了”，而是多个小问题叠加：比如路径错导致 CSS 404，同时又在 public/index.html 里多加了一条 CDN link（但构建时没处理哈希），再配上 scoped 样式里写了错误的深度选择器……最终表现就是“样式全没了”。每次只动一个变量，用 Network 和 Elements 面板交叉验证，比盲目加 !important 高效得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
