Question

我似乎无法更改导航栏中的字体颜色，导航栏css中的其他元素有效，但出于某种原因不能使用字体颜色。我试图改变类，但然后我在CSS中的其他元素不会工作。我似乎无法找到问题，虽然这是我第一次使用bootstrap。

CSS

.navbar  {
background-color: white;
border: none;
color: #0000;

}

.navbar-brand {
font-size: 50px;

}

HTML

<head>
<title></title>
<meta charset="utf=8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">

</head>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar=header">
            <a class="navbar-brand" href="#">TRAVELLING</a>
        </div>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">home</a></li>
                <li><a href="#">about</a></li>
                <li><a href="#">contact</a></li>
            </ul>
        </div>
    </div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>

</body>
</html>

Answer 1

.navbar  {
background-color: white;
border: none;
color: #000;
}

.navbar .navbar-nav li > a{
  color: orange !important;
}

.navbar .navbar-brand {
font-size: 50px;
color: blue !important;
}

<head>
<title></title>
<meta charset="utf=8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">

</head>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">TRAVELLING</a>
        </div>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">home</a></li>
          <li><a href="#">about</a></li>
          <li><a href="#">contact</a></li>
        </ul>
    </div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>

</body>
</html>

Answer 2

您为color属性指定了错误的值。它应为3或6位数，如pg_config或color: #000

CSS

color: #000000

Answer 3

代码

.navbar  {
background-color: white;
border: none;
color: black;
}

.navbar-brand {
font-size: 50px;
}
.navbar a{
color:red;
}
.navbar li a{
color:red;
}

Answer 4

您还可以在导航栏中使用要更改的内联css。试试这样的事情

<nav class="navbar navbar-default" style="background-color:white;border:none;color:#000;">

Answer 5

尝试类似：

 .navbar {
  background-color: white !important;
  border: none;
}

.navbar-brand {
  font-size: 50px;
}

.navbar *{
  color: #000 !important; // should set font color for element contain text
}

Answer 6

您可以使用navbar-inverse而不是navbar-default。如果想制作自己的颜色，只需在css样式表中读出navbar的css属性。

无法更改导航栏中的字体颜色

6 个答案: