Bootstrap样式加载顺序至关重要，因CSS按顺序层叠生效，后加载的同优先级规则会覆盖前者；必须确保custom.css在bootstrap.min.css之后加载，且通过Network面板和HTML源码验证真实顺序。
直接看Network面板里的CSS加载顺序
别猜、别信import语句，浏览器只认HTML里最终解析出的顺序。打开开发者工具 → Network → 切换到CSS过滤器 → 刷新页面，观察bootstrap.min.css和你的custom.css是否按预期先后出现，且状态码都是200。
- 如果custom.css排在bootstrap.min.css前面，样式大概率被覆盖
- 如果某个CSS文件显示404或pending，说明路径错误或服务未返回
- CDN链接里混入了
[bootstrap.min.css](https://...)这种Markdown写法，会导致浏览器向本地地址发起非法请求
检查HTML源码中的实际位置
右键页面 → “查看页面源代码”，搜索bootstrap.min.css和custom.css，确认它们在<head>中的书写顺序。Webpack/Vite打包后，JS里的import './custom.css'不保证最终顺序，只有HTML里的顺序是铁律。
- public/index.html里手动写的
<link>最可靠，把它放在Bootstrap的<link>下方、</head>之前 - Django用户要确认
{% static 'css/custom.css' %}渲染后确实是有效路径，且服务器返回200 - Vite用户需检查
vite.config.ts中是否启用了css.preprocessorOptions，它可能导致样式注入延迟，造成“闪一下”才生效
用Elements面板验证谁赢了层叠竞争
选中一个带Bootstrap类的元素（比如<button class="btn btn-primary">），在Styles面板里看哪些规则被划掉、哪些生效。被划掉的规则，就是输给了更高权重或更晚加载的样式。
- 鼠标悬停在某条CSS规则上，DevTools会显示
specificity: 0,1,1,1这类值——数字越大，优先级越高 - 点击规则旁的文件名（如
bootstrap.min.css:123或custom.css:45），快速跳转定位 - 如果
.my-btn被划掉，但来源确实是custom.css，那不是写错了，是它根本没参与竞争：要么加载失败，要么加载太早
警惕构建工具悄悄重排CSS顺序
Webpack的mini-css-extract-plugin会按模块依赖图重排CSS，不是按你写的import顺序；Vite默认把所有CSS合并进一个style标签，但注入时机可能晚于DOM就绪。最终起作用的是生成的HTML或main.css里规则的实际排列位置。
立即学习“前端免费学习笔记（深入）”；
- Webpack用户可临时禁用CSS提取，改用
import '!style-loader!css-loader!./custom.css'强制最后注入<style>标签（仅限开发） - 生产环境必须检查打包后的
main.css内容：搜索.btn，看Bootstrap规则是否出现在你的自定义规则之前 - 多个entry（如app.js和admin.js）时，
html-webpack-plugin可能按字母序插入，导致admin.css意外压过app.css
