最常见原因是CSS优先级被Bootstrap的.navbar-light .navbar-brand或.navbar-dark .navbar-brand覆盖；需用相同或更高权重的选择器覆盖，如.navbar-light .navbar-brand { color: #2c3e50; }，并确保CSS在Bootstrap之后加载。
直接改 .navbar-brand 为什么颜色不生效
最常见的情况是写了 .navbar-brand { color: #e74c3c; } 却没反应——不是语法错，而是 CSS 优先级被 Bootstrap 的 .navbar-light .navbar-brand 或 .navbar-dark .navbar-brand 覆盖了。这两个组合选择器权重更高，尤其当你的 <nav> 带了 navbar-light 类时，单写 .navbar-brand 根本竞争不过。
必须用更具体的选择器覆盖颜色
别绕弯子，直接照着 Bootstrap 的实际类名写：
-
.navbar-light .navbar-brand { color: #2c3e50; }—— 用于浅色导航栏 -
.navbar-dark .navbar-brand { color: #ecf0f1; }—— 用于深色导航栏 - 如果同时支持两种主题，合并写：
.navbar-light .navbar-brand, .navbar-dark .navbar-brand { color: #9b59b6; }
注意：不要加 !important。只要确保你的 CSS 文件在 Bootstrap CSS 之后加载（<link> 标签放在它后面），这些规则就能稳稳生效。
用 Sass 变量改色只适用于源码项目
如果你用的是 npm 安装的 Bootstrap 并自己编译 Sass，可以提前覆盖变量：
- 在导入 Bootstrap 前定义：
$navbar-brand-color: #3498db; - 再
@import "bootstrap/scss/bootstrap"; - 但注意：这个变量只影响默认主题下的
.navbar-brand，不作用于.navbar-light或.navbar-dark的变体，它们仍需单独覆盖
颜色异常？先检查是否漏了配套类
比如你加了 navbar-dark，但没配 bg-dark，结果 .navbar-brand 被设成白色，却落在浅灰背景上，显得发灰甚至看不见。这不是颜色没改，是对比度崩了。
- 深色导航栏务必配
bg-dark（或自定义深色背景） - 浅色导航栏推荐配
bg-light或bg-white - 如果用了自定义背景色（如
#1a1d22），.navbar-dark .navbar-brand的默认白色可能不够亮，得手动调成#e9ecef这类高亮灰
真正容易被忽略的是：移动端折叠后弹出的 .navbar-collapse 区域默认是白底黑字，和深色导航栏完全断裂——那里品牌文字的颜色得另外控制，它不继承 .navbar-brand 的样式。
