Bootstrap 3 样式冲突根因是全局选择器泛滥与优先级失控，可控解法唯有命名空间隔离（如LESS嵌套编译为.bootstrap-iso .btn）或按需引入核心模块并剥离重置样式。
Bootstrap 3 的样式冲突本质是全局选择器泛滥 + 优先级不可控，靠后加载、!important 或手动覆盖只能救急，不能根治。真正可控的解法只有两种：要么让 Bootstrap 的所有规则“缩进”到一个命名空间里，要么把它拆开只引入需要的部分。
为什么后加载自己的 CSS 还是压不住 .btn 样式
因为 Bootstrap 3 大量使用复合选择器（如 .btn.btn-default、.form-control:focus），其 specificity 往往高于你写的单类名规则（如 .my-btn）。即使你把 mine.css 放在 bootstrap.min.css 后面，也得写成 .my-btn.btn 或 button.my-btn 才可能赢过它。
- 检查开发者工具中被 strike-through 的声明，确认是哪一级选择器在生效
- 避免无差别加
!important——它会污染后续所有覆盖逻辑，尤其影响响应式断点下的重写 - Bootstrap 3 的
.container、.row、.col-xs-*等栅格类权重不高，但一旦和你的.wrapper同级并存，就容易因顺序或继承错乱
用 LESS 嵌套实现 .bootstrap-iso 命名空间隔离
这是最彻底的方案，但必须从源码编译起步——不能只给 <html> 加个 class="bootstrap-iso" 就完事。LESS 文件要这样组织：
.bootstrap-iso {
// 注意：这里必须 @import 所有 Bootstrap 3 的核心文件
@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap/buttons";
@import "bootstrap/grid";
// ...其余模块
}编译后，所有 .btn 变成 .bootstrap-iso .btn，.row 变成 .bootstrap-iso .row，天然避开全局污染。
立即学习“前端免费学习笔记（深入）”；
- 别跳过
@import "bootstrap/responsive-utilities"——否则.hidden-xs这类类名不会被包裹，仍会泄漏 - JS 组件（如
Modal）默认仍找.modal，你要么改用 JS 初始化方式：$('#my-modal').modal()→$('.bootstrap-iso #my-modal').modal()，要么重写 data-api 触发逻辑 - Bootstrap 3 不支持 CSS Custom Properties，所以变量（如
@btn-primary-bg）可照常在命名空间外复用，无需额外处理
不编译时的最小干预方案：按需引入 + 覆盖重置
如果你无法动构建流程，又不想全量加载 Bootstrap 3，可以只引入它真正需要的部分，并剥离干扰项：
- 删掉
bootstrap.css中的normalize.css片段和body/h1/input等基础重置——这些最容易和你现有样式打架 - 只保留
grid.less、buttons.less、forms.less等业务强依赖模块，重新编译为精简版bootstrap-core.css - 在你自己的
base.css里提前定义：* { box-sizing: border-box; }和img { max-width: 100%; }，防止 Bootstrap 的重置覆盖你已有的盒模型约定 - 对必须共存的组件（如表单控件），用属性选择器提升 specificity：
input[type="text"].form-control比单纯.form-control更稳
命名空间方案看似重，但一劳永逸；按需引入轻量，却要求你清楚哪些模块真被用到、哪些只是历史残留。最容易被忽略的是：Bootstrap 3 的 .sr-only 和 .clearfix 这类辅助类，它们没有视觉表现，但一旦被覆盖或缺失，会导致屏幕阅读器行为异常或浮动塌陷——这类细节往往在线上才暴露。
