Bootstrap样式未生效的主因是加载顺序错误或!important滥用，需确保bootstrap.css在自定义CSS前引入、避免随意使用!important、检查Sass变量导入顺序、处理scoped样式穿透及第三方库兼容性问题。
Bootstrap 样式没生效，检查 !important 和加载顺序
Bootstrap 的 CSS 规则被覆盖，最常见原因是其他样式表在它之后加载，或者用了 !important 强行压过它的默认规则。浏览器开发者工具里看元素的「Computed」面板，点开某个属性（比如 margin），能看到哪条 CSS 规则最终胜出——如果来源是你的自定义 CSS 文件，基本就是顺序或权重问题。
- 确保
bootstrap.css（或bootstrap.min.css）在你自己的 CSS 文件之前引入 - 避免在自定义样式里滥用
!important；真要用，得比 Bootstrap 原生规则更具体（比如用.btn.btn-primary:hover而不是单纯.btn:hover） - Bootstrap 5+ 默认不包含 jQuery，但如果你项目里还混着旧版 JS 插件（如
tooltip），CSS 类名可能没被正确添加，导致样式“看起来没生效”
自定义 class 名和 Bootstrap 工具类冲突
比如你写了 .text-center 想居中文字，但 Bootstrap 也有同名工具类，结果表现异常——这不是覆盖失败，而是你写的规则和 Bootstrap 的规则作用在同一个元素上，CSS 层叠逻辑让某一方“赢了”。尤其当使用 Sass 编译时，@extend 或重复 @import 可能悄悄引入两遍相同类名。
- 用浏览器检查元素，确认实际应用的 class 列表是否含预期值（比如是不是误写了
text-cener） - Bootstrap 工具类（如
mb-3、fw-bold）优先级很低，纯靠选择器长度撑权重，所以一个简单的.my-component .text-center就能干掉它 - 如果必须复用同名词，建议改名：把
.text-center改成.section-title--centered，彻底避开歧义
使用 custom.scss 覆盖变量但编译后无效
很多人按文档改了 $primary、$font-size-base 等变量，重新编译却没变化，问题常出在导入顺序或变量重定义时机。Bootstrap 的 Sass 文件对变量有 !default 标记，意味着“只在未定义时才赋值”，一旦你在 @import 它之前没声明，它就用内置默认值。
- 确保你的自定义变量在
@import "bootstrap/scss/functions";之后、@import "bootstrap/scss/variables";之前声明 - 不要在
variables.scss里直接改源码——改自己新建的_custom-variables.scss，再@import进来 - 如果用了 CSS 自定义属性（
--bs-primary），注意 Bootstrap 5.3+ 才全面支持，旧版本改了也白改
第三方组件库（如 Vue 的 Element Plus）样式穿透失败
在 Vue 或 React 项目里，用 <template> 或 styled-components 封装了 Bootstrap 组件，结果内部按钮、输入框的样式全丢了。这是因为 scoped CSS 或 shadow DOM 阻断了样式向下传递，Bootstrap 的选择器根本匹配不到子组件节点。
- Vue 单文件组件里，给
<style scoped>加::v-deep（或:deep()）穿透到子组件，例如:deep(.btn) { border-radius: 0; } - React 中若用 Emotion 或 styled-components，需显式将 Bootstrap class 透传给子元素，不能只靠父容器 class 控制
- 别指望
!important能绕过 scoped 限制——它解决不了选择器匹配不到的问题
真正卡住的地方，往往是开发者工具里看到“样式已加载”，但没细看那条规则是不是被 strike-through 掉了；或者以为改了变量就万事大吉，却漏掉了 Sass 编译链里某一步没触发重构建。
