Question

我正在尝试将标题导航背景颜色更改为黄色，但对我来说不会更改，而是保持白色/空白。

我正在尝试学习html，css，javascript课程，并且我与讲师一起建立网站。当他将Header-nav背景颜色更改为黄色时，它对他却对我却改变了，据我所知，我们具有相同的代码。我尝试了几种不同的十六进制颜色，但没什么不同。

 <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
  </head>
<body>
  <header>
    <nav id="header-nav" class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a href="Index.html" class="">
            <div id="logo-img" alt="Logo image"></div>
          </a>

      </div>
    </div>


    </nav>

  </header>
  <!-- jQuery (Bootstrap JS plugins depend on it) -->
  <script src="js/jquery-2.1.4.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/script.js"></script>





body {
    font-size: 16px;
    color: #fff;
    background-color: #61122f;
    font-family: "Oxegyn" , sans-serif;
}


/** HEADER **/
#header-nav {
    background-color: #f6b319;
    border-radius: 0;
    border: 0;
}

#Logo-img {
    background: url(Resteraunt.jpeg) no-repeat;
    width: 150px;
    height: 150px;
    margin: 10px 15px 10px 0;
}

没有错误代码。它只是在标题容器所在的位置显示一个空白区域，而没有颜色。

Answer 1

此class="navbar navbar-default"具有预定颜色的原因。可能要先验证一下。

您可以尝试：

background-color: #f6b319 !important;

另一个快速解决方案是更新您的代码：

<nav id="header-nav" class="navbar navbar-default" style="background-color: #f6b319;">

自从您执行以下引导程序以来，您可以参考以下文档：https://getbootstrap.com/docs/4.0/components/navbar/

Answer 2

我用导入的引导程序尝试过：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

，它有效.. 也许您的引导文件中有 navbar navbar-default 背景颜色的规则。

所以尝试：

修改导入的顺序或
以CSS样式向导航栏背景添加！重要 或
插入样式内联

导航栏容器不会更改颜色

2 个答案: