如何在Bootstrap 5中将导航栏(navbar)文字颜色设置为#0d6efd蓝色

解决方案 #

问题原因 #

你当前使用了navbar-light类，Bootstrap 5会给这个类下的.nav-link、.navbar-text等导航相关元素预设默认文本颜色，如果你之前写的自定义CSS优先级低于Bootstrap默认规则，就会出现样式不生效的情况。

可选实现方案 #

方案1：使用Bootstrap内置工具类（无需额外写CSS）

#0d6efd正好是Bootstrap 5默认的primary主题色，你可以直接给所有导航相关的文字元素加text-primary类即可：

• 所有<a class="nav-link">修改为<a class="nav-link text-primary">
• 提示文字<span class="navbar-text">修改为<span class="navbar-text text-primary">

如果需要调整hover、激活状态的颜色，可以再加对应的hover类，比如text-hover-primary（需要Bootstrap 5.1及以上版本支持）。

方案2：自定义CSS覆盖规则

如果需要自定义更灵活的样式，确保你的自定义CSS文件引入顺序在Bootstrap CSS之后，添加以下代码即可：

/* 普通状态文字颜色 */
.navbar .nav-link,
.navbar .navbar-text {
  color: #0d6efd;
}
/*  hover、聚焦、激活状态的文字颜色，可按需调整色值 */
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
  color: #0a58ca;
}

如果依然不生效，可以在色值后面加!important提升优先级，不过只要引入顺序正确，大部分情况不需要加。

内容的提问来源于stack exchange，提问作者Ravin Fernando