如何覆盖navbar.less的CSS？Bootstrap v3.4.1导航链接颜色修改求助

核心原因 #

你遇到的是CSS优先级问题——Bootstrap里navbar相关的样式选择器优先级比你写的内联样式、直接修改bootstrap.css的样式更高，导致你的修改不生效。

具体解决方法 #

方法1：用更高优先级的自定义CSS（推荐）

不要直接修改bootstrap.css，新建一个自定义CSS文件（比如custom.css），在页面中放在Bootstrap CSS之后引入，然后写优先级更高的选择器：

/* 导航链接默认状态颜色 */
.navbar .nav > li > a {
    color: #e74c3c; /* 替换成你需要的颜色值 */
}

/* 鼠标悬停/聚焦状态的颜色 */
.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus {
    color: #c0392b;
}

/* 如果你的导航链接用了.nav-link类，直接用这个选择器 */
.navbar .nav-link {
    color: #e74c3c;
}

ASP.NET布局页里确保CSS引用顺序正确：先引Bootstrap的CSS，再引你的自定义CSS，示例：

<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/custom.css" rel="stylesheet" />

方法2：临时用!important强制覆盖（应急用，不推荐）

如果赶时间可以给样式加!important强制提升优先级：

.nav-link {
    color: #e74c3c !important;
}

或者内联样式也加：

<a href="#" class="nav-link" style="color: #e74c3c !important;">首页</a>

方法3：基于Less编译修改（若项目用Less）

如果项目是用Less编译Bootstrap的，不要修改Bootstrap源文件，在自定义Less文件里导入Bootstrap后再写覆盖样式：

@import "bootstrap.less";

// 覆盖导航链接颜色
.navbar .nav > li > a {
    color: #e74c3c;
}

重新编译Less生成CSS文件即可。

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