自定义类名被Bootstrap 4覆盖，是因为其CSS后加载且大量使用!important（如.text-center、.btn-primary），而浏览器按加载顺序和选择器权重决定最终样式；若自定义类无更高权重或未加!important，则必然失效。
为什么自定义类名和 Bootstrap 4 内置类同名时总被覆盖
因为浏览器按 CSS 加载顺序和选择器权重决定最终样式，而 Bootstrap 4 的 CSS 文件通常后加载、且大量使用 !important（如 .text-center、.d-flex），你的同名类若没更高权重或更晚加载，必然失效。
常见被覆盖的类名及典型表现
不是所有同名类都会出问题，但以下几类最常“静默失败”：
-
.container：你定义了.container { max-width: 1400px; }，但 Bootstrap 4 的.container在sm断点下强制设为540px，且带!important（部分版本） -
.text-center：你的自定义居中只写text-align: center;，而 Bootstrap 4 的.text-center同时设置了text-align: center !important; -
.btn和.btn-primary：你改了背景色，但 Bootstrap 的.btn-primary带background-color: #007bff !important;（v4.6+ 默认启用） -
.form-control：你调了border-radius，但 Bootstrap 4 的.form-control用border-radius: .25rem;+!important锁死
怎么查清到底是哪条规则赢了
别猜，直接用 DevTools 的 Styles 面板看：
- 选中元素，右侧 Styles 标签里找你写的类名，看它是否被划掉（
strikethrough） - 点开被划掉的那行，看“origin”列——是来自
bootstrap.min.css还是你的custom.css - 重点看有没有
!important标记；如果有，你的同名规则除非也加!important或提升选择器权重（比如写成.my-form .form-control），否则必输 - 检查 Computed 标签页里的
text-align、max-width等值，点击右侧小箭头，能直接跳转到最终生效的那条 CSS 规则
真正可靠的覆盖方式，不是硬刚类名
靠“重写同名类”来覆盖 Bootstrap 4 是条窄路，容易随版本升级突然崩。更稳的做法是绕开冲突：
- 给自定义样式加命名空间前缀，比如把
.btn改成.my-btn，再单独写.my-btn { ... }，彻底脱离同名竞争 - 用更具体的选择器压制，例如不写
.text-center，而写.my-section .text-center或section.my-content > *:first-child - 在项目 CSS 文件末尾
@importBootstrap，确保你的规则后解析（但仅对无!important的规则有效） - 如果必须动核心类，走 SCSS 源码定制：在
variables.scss里改$enable-important-utilities: false;，再重新编译 Bootstrap，从根上移除!important干扰
同名类覆盖失效，本质是 CSS 层叠逻辑在说话。与其反复调试 !important 多少层，不如接受 Bootstrap 4 的设计边界——它默认就打算让你“用它的类”，而不是“替它重写类”。真正难的不是让样式生效，而是判断该不该去覆盖它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
