更改Bootstrap Nav栏中的字体颜色

我正在制作自己的网站，并且我在此NAV栏上挣扎。我尝试使用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">
</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>

使用以下：

.collapse ul li a{
  color:white
}
.navbar-brand{ 
  color:white
}

在线演示

<nav class="navbar navbar-light navbar-custom" style="background-color: #5bb85b; color: white !important;">

但我建议不要使用内联CSS，您也应该注意，内联！

在您想要的背景色中指定所需的颜色，并在CSS文件中添加这些行


    
        .navbar-header
        {
            background-color:red;
        }
        .navbar-collapse
        {
                background-color:red;
        }

希望它能帮助您

相关内容

最新更新

热门标签：