在引导程序导航栏中更改字体颜色 [英] changing font color in bootstrap nav bar
本文介绍了在引导程序导航栏中更改字体颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在制作自己的网站，但我一直在为这个导航栏苦苦挣扎.我尝试使用 CSS 更改字体颜色，但它甚至没有更改颜色.但背景确实如此.我想用我想要的颜色来操纵我的导航栏颜色.
这是代码
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="style.css"><身体><!--- 导航菜单---><div class="bs-example"><nav class="navbar navbar-light navbar-custom "style="background-color:#5bb85b;color:white;"><!-- 品牌和切换被分组以获得更好的移动显示--><div class="navbar-header"><button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"><span class="sr-only">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a href="#" class="navbar-brand">Anuar</a><!-- 用于切换的导航链接和其他内容的集合--><div id="navbarCollapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-right"><li class="active"><a href="#">首页</a></li><li><a href="#">个人资料</a></li><li><a href="#">消息</a></li>
</nav>
解决方案
使用这个:
.collapse ul li a{白颜色}.navbar-brand{白颜色}I am making my own website and I've struggled with this nav bar. I try to change the font color using CSS but it didn't even change the color. But the background does. I want to manipulate my navbar color with color that I want.
Here is the code
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--- Nav menu--->
<div class="bs-example">
<nav class="navbar navbar-light navbar-custom "style="background-color:#5bb85b;color:white; ">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Anuar</a>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
</div>
</nav>
解决方案
use this:
.collapse ul li a{
color:white
}
.navbar-brand{
color:white
}
这篇关于在引导程序导航栏中更改字体颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
