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

标签 html css twitter-bootstrap

<分区>


这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能在这里出现,但这个问题的解决方式不太可能帮助 future 的读者。

关闭 5 年前

我似乎无法更改导航栏中的字体颜色,我的导航栏 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>

最佳答案

.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>

关于html - 无法更改导航栏中的字体颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45686180/

上一篇:javascript - jquery 将属性值添加到 css

下一篇:javascript - 如何防止 HTML/CSS 中父容器的内容溢出?

相关文章:

css - Bootstrap 响应式导航栏在较低的 View 比率下出现奇怪的格式

javascript - 检测是否单击了 div 的背景图像的一部分

javascript - 从每个类获取两个输入数据,在内部相互相乘,将每个数据相加并显示在 div 中

html - 如何让div在滚动时消失

html - 类的 Css 和 html 问题

javascript - 如何更改数据工具提示消息

javascript - Bootstrap 无法处理非常大的屏幕分辨率

HTML:垂直对齐进度条

html - bg-info 不适用于 bootstrap 中的全身

javascript - 我如何打开 Bootstrap 模态 onbeforeunload 功能,