这可能是您所需要的，但我建议您从 sass/scss 变量中更改它。这可能是一个很长的路，因为你必须学习如何在nodejs环境中构建bootstrap css文件，this可以帮助你。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
body {
background-color: grey;
}
.navbar-custom {
background-color: purple;
border: transparent;
box-shadow: 0px 0px 0px 2px grey;
margin: 0;
}
.navbar-custom .navbar-header a,
.navbar-custom .navbar-header a:hover {
color: #fff;
}
.navbar-custom ul.navbar-nav li a:hover {
background-color: gray;
color: #fff;
}
.navbar-custom ul.navbar-nav a {
color: #fff;
}
.navbar-custom ul.navbar-nav a:hover {
color: blue;
}
main {
width: 60%;
background-color: white;
margin: 0 auto;
box-shadow: 0.5px 0.5px 0.5px 0.5px grey;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Logo</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">About</a></li>
<li><a href="#">Portofolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<main>
<p>main content</p>
</main>
</body>
</html>另外，我认为这是一个不好的做法，并且它无法扩展使用！重要。
您可以阅读有关 何时使用 important 的内容，或许还有一些 css 特异性 :)
在 CSS 中使用颜色来更改字体颜色。
.navbar {
background-color: purple;
border: transparent;
box-shadow: 0px 0px 0px 2px grey;
margin: 0;
}
a{color:red;}
如果您正在使用框架并需要更改它，请使用！重要。 !重要的是改变已经设置的样式。
.navbar {
background-color: purple;
border: transparent;
box-shadow: 0px 0px 0px 2px grey;
margin: 0;
}
a{color:red!important;}
您可以将字体颜色添加到导航CSS中
{color: #fff}.navbar a {color: #fff}.navbar a, .navbar a:hover, .navbar a:visited {color: #fff}您可以将颜色附加到导航栏类，例如颜色：#whatevercoloryouchoose
它应该看起来像这样
.navbar {
color: #whatevercoloryoulike;
background-color: purple;
border: transparent;
box-shadow: 0px 0px 0px 2px grey;
margin: 0;
}
如果您使用选项卡：这对我有用：
.mdc-tab__text-label {
color: white;
}