Bootstrap 的 CSS 重置会覆盖全局样式，因其在 bootstrap.css 开头内置 normalize.css + 自定义 reset，统一重设 body、h1–h6、p、ul、ol、button 等元素的 margin、padding、font-size、line-height 和 box-sizing，导致原有样式被覆盖。
Bootstrap 的 CSS 重置（reset）会覆盖全局样式
Bootstrap 在 bootstrap.css 开头就内置了一套 normalize.css + 自定义 reset 规则，它会统一重设 body、h1–h6、p、ul、ol、button 等原生元素的 margin、padding、font-size、line-height 和 box-sizing。你原来写的 h2 { margin: 0; font-size: 18px; } 很可能被 Bootstrap 的 h2 { margin-top: .5rem; margin-bottom: .5rem; font-size: 2rem; } 直接覆盖。
常见现象包括：标题突然变大变重、段落间距消失或爆炸、按钮失去圆角和背景色、列表项缩进错乱。
- 解决办法不是删掉 Bootstrap 的 reset，而是提前在它之前加载你自己的
base.css，并用!important谨慎兜底关键样式（仅限极少数不可妥协的 UI 原则） - 更推荐的方式是接受 Bootstrap 的基础排版节奏，把自定义样式写在它之后，并用更具体的 CSS 选择器（如
.my-header h2）提高权重 - 如果你项目已有大量旧样式，可考虑只引入 Bootstrap 的 JS 组件（不引入 CSS），或用
@import方式按需导入部分模块（需配合 Sass 编译）
字体、行高、盒模型默认值被强制统一
Bootstrap 3/4/5 全系默认将 box-sizing 设为 border-box，并把 font-size 锚定在 16px（根元素 html），再通过 rem 推导所有尺寸。而你原来的 CSS 可能基于 content-box + px + 自定义 body 字号来计算宽度和留白——一旦 Bootstrap 的 html { font-size: 16px; } 和 * { box-sizing: border-box; } 生效，所有依赖原始盒模型的宽度计算都会偏移。
典型表现：一个你写死 width: 200px 的容器，在 Bootstrap 下实际占用空间变小；文字行高突变导致卡片高度塌陷。
- 检查浏览器开发者工具中元素的 computed 样式，重点看
box-sizing和font-size是否被 Bootstrap 覆盖 - 若必须保留旧盒模型逻辑，可在局部用
.legacy-section { box-sizing: content-box !important; }隔离，但注意这会破坏栅格对齐 - Bootstrap 5 开始默认禁用
prefers-reduced-motion等可访问性样式，若你原有动画依赖系统偏好，也会意外失效
类名冲突：你写的 .btn 或 .row 被 Bootstrap 直接接管
Bootstrap 的核心类名（如 row、col-md-6、btn、text-center）是全局生效的。如果你原有代码里也定义了 .row { display: flex; }，或者用 .btn 表示“返回按钮”，那引入 Bootstrap 后，这些类会立刻被它的栅格规则或按钮样式接管，且优先级往往更高（尤其当你的 CSS 文件在 Bootstrap 之后加载时）。
最隐蔽的问题是：你没用这些类，但第三方库或 CMS 主题悄悄用了，结果一加 Bootstrap，整个布局就“被栅格化”了。
- 用浏览器审查元素，看目标节点是否意外获得了 Bootstrap 的 class 属性或 computed 样式
- 搜索项目中所有
class="row"、class="col-"、class="btn"，确认它们是真想用 Bootstrap 功能，还是历史遗留命名 - 命名空间隔离：给自有组件加前缀，比如把
.btn改成.my-btn，避免与框架类名同名
加载顺序错误导致样式未生效或 JS 组件无法初始化
样式全乱，有时根本不是 CSS 冲突，而是 Bootstrap 的 CSS 没加载成功，或者 JS 在 DOM 尚未就绪时就执行了初始化（比如 $('.dropdown') 找不到元素）。典型错误包括：
-
<link>放在底部，导致页面先渲染无样式的 HTML，再闪动重绘 - Bootstrap JS 在 jQuery 之前加载（报错
$ is not defined），导致下拉菜单、模态框等交互失效，让你误以为“样式坏了” - 本地路径错误，比如
href="css/bootstrap.min.css"实际文件在lib/bootstrap/css/下，404 后浏览器静默失败，控制台可能只显示一条浅灰色 warning
验证方式很简单：打开浏览器开发者工具 → Network 标签页，筛选 bootstrap，确认 CSS 和 JS 文件状态码是 200，且没有黄色警告图标。
真正麻烦的不是“样式乱了”，而是乱得不一致——有些页面正常，有些页面按钮消失，有些只在手机端错位。这种碎片化问题，90% 出在局部覆盖不完整或条件加载逻辑里漏掉了某版 Bootstrap 的 reset 行为。盯住 html、body 和第一个 div 的 computed 样式，比通读文档更快定位根因。
