Question

我正在建立自己的网站，我一直在努力使用这个导航栏。我尝试使用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>

Answer 1

使用它：

.collapse ul li a{
  color:white
}

.navbar-brand{ 
  color:white
}

Online Demo

Answer 2

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

但我建议不要使用内联css，你也应该注意内联！important不能重写。

Answer 3

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



    

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

        }

希望它可以帮助您

在bootstrap导航栏中更改字体颜色

3 个答案: