导航栏容器不会改变颜色答案

【问题标题】：Navbar container won't change color导航栏容器不会改变颜色
【发布时间】：2019-07-02 03:36:09
【问题描述】：

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

我正在尝试学习 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;
}

没有错误代码。它只显示标题容器所在的透明/白色区域，但没有颜色。

【问题讨论】：

标签： jquery html css twitter-bootstrap

【解决方案1】：

我已经尝试过使用以下方式导入的引导程序：

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

它的工作原理.. 也许在你的引导文件中有 navbar navbar-default 背景颜色的规则。

所以尝试：

修改导入顺序 或
将 !important 添加到您的 CSS 样式中的导航栏背景或
插入样式内联

【讨论】：

【解决方案2】：

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/

【讨论】：

对不起，我想通了，有 2 个 CSS 样式表，一个之前和一个之后。我点击了错误的，当我犯了一个错误并保存它时我意识到了。我意识到我做了什么，并期望它会搞砸，但事实并非如此，然后我搞砸了它并意识到它没有影响任何东西，所以我回到文件夹并找到了正确的 CSS 表。编辑：我也试过你的方法，它也有效，谢谢。