如何排查Bootstrap CSS与自定义主题冲突的问题？-css教程-PHP中文网

自定义主题不生效主因是未参与css层叠竞争，需确保custom.css在html中位于bootstrap.min.css之后，并用.my-section .btn等组合选择器提权至0,0,2,0，避免!important；动态组件如modal需包裹作用域容器以防样式脱钩。

如何排查bootstrap css与自定义主题冲突的问题？

自定义主题不生效，大概率不是你写错了样式，而是它根本没参与 CSS 层叠竞争——Bootstrap 的规则先加载、权重更高，你的样式被“静默丢弃”了。

检查 HTML 中 `<link>` 的实际顺序

你以为在 main.js 里 import 'bootstrap.min.css' 后面写了 import './custom.css' 就稳了？构建工具（Vite/Webpack）可能把所有 CSS 打包进一个 index.css，并按依赖图重排顺序。最终起作用的是浏览器实际解析的里的 <link> 顺序。

打开开发者工具 → 右键页面 → “查看页面源代码”，确认 <link rel="stylesheet" href="bootstrap.min.css"> 确实在你的 custom.css 之前
CDN 场景下，手动把自定义 CSS 的 <link> 放在 Bootstrap <link> 下方，且不要加 async 或 defer
Vite 用户：检查 vite.config.ts 是否启用了 css.preprocessorOptions，它可能导致样式注入时机错乱

验证选择器是否真正匹配并赢过权重

打开开发者工具 → Elements 面板 → 选中目标元素（如 <button class="btn btn-primary"></button>）→ 切到 Styles 面板，看你的规则是否被划掉；再点那个被划掉的声明，确认来源是不是 bootstrap.min.css。如果 Computed 面板里显示的值来自 .btn.btn-primary，说明你的单类规则连入场券都没拿到。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

.btn 权重是 0,0,1,0；.btn.btn-primary 是 0,0,2,0 —— 单靠后加载无法翻盘
改用组合选择器提权：.my-section .btn（0,0,2,0）或 .btn.my-btn（0,0,2,0），和 Bootstrap 原生规则平级
避免 !important：它在内联样式、Dark Reader 插件、Shadow DOM 场景下会突然失效

注意 JS 动态挂载组件的样式脱钩问题

真正难处理的不是静态按钮，而是 Modal、Tooltip、Dropdown 这类 JS 动态挂载到 document.body 的组件——它们天然跳出任何 HTML 容器，CSS 选择器匹配失败是静默的，连报错都没有。

.dropdown-backdrop 在移动端可能盖住菜单，只需一行修复：.dropdown-backdrop { position: static !important; }
确保这些组件的 DOM 节点也被包裹在你的作用域容器里（如 <div class="my-bs">...</div>），否则样式完全不生效
检查 --bs-dropdown-zindex 是否被设得太低，导致菜单被 sticky header 等压住

最常被忽略的点是：你写的规则可能语法正确、位置靠后、也加了类，但它根本没被浏览器当作“候选者”——因为权重不够，连层叠队列都进不去。动手前，先看 Styles 面板里哪条被划掉了、为什么被划掉。