无法自定义使用 Bootstrap 3 创建的导航栏答案

【问题标题】：Cannot customise Navbar created with Bootstrap 3无法自定义使用 Bootstrap 3 创建的导航栏
【发布时间】：2016-11-26 23:51:50
【问题描述】：

我的引导导航栏无法在 CSS 中自定义。我已插入我的 CSS 代码作为示例。当我删除 id #nav 并改用 .navbar-inverse; 时，它也不起作用......使用的 CSS 颜色只是为了查看是否正在进行更改。

这是出现的picture...

非常感谢您的任何帮助/建议！ :)

@media (max-width: @screen-md-max) {
    .container{
        padding: 0;
        overflow-x: hidden;
    }
}

/* ----- BACKGROUND ----- */
body {
    background-image: url('../img/harley.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    margin: -10px;
    background-attachment: fixed;
}


/* ----- BODY ----- */

#header {
  height: 150px;
  margin-top: 0px;
  margin-bottom: 0;
  margin: auto;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.5);
  background-attachment: fixed;
}


#header h1 {

  font-family: "Trocchi", serif;
  color: #3E2F1B;
  padding-top: 30px;
}

#header h2 {

  font-family: "Trocchi", serif;
  color: #644A26;
  font-size: 20px;
  padding-top: 20px;
}

/* -- RESPONSIVE HEADER (need to add more) */

@media all and (max-width: 2000px) {
  #header h1 {
    font-size: 5.7em;
  }
}

@media all and (max-width: 1500px) {
  #header h1 {
    font-size: 5.0em;
  }
}

@media all and (max-width: 1000px) {
  #header h1 {
    font-size: 4.3em;
  }
}

@media all and (max-width: 750px) {
  #header h1 {
    font-size: 3.7em;
  }
}

@media all and (max-width: 700px) {
  #header h1 {
    font-size: 3.0em;
  }
}

@media all and (max-width: 500px) {
  #header h1 {
    font-size: 2.3em;
  }
}
<<<<<<< HEAD

/* ----- NAVIGATION BAR ----- */

#nav {
  background-color: pink;
  border-color: blue;
}

<!DOCTYPE html>
<html lang="en">
  <head>

    <title>Home / Harley's Haunts</title>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

    <!-- import font "Trocchi" -->
    <style>
      @import url('https://fonts.googleapis.com/css?family=Trocchi');
    </style>

  </head>
  <body>


<!-- ***** HEADER ***** -->

<div class="container-fluid" id="header">
  <h1>HARLEY'S HAUNTS</h1>
  <h2>Where dogs are welcome in Aberdeen!</h2>
</div>

<!-- ***** NAVIGATION BAR ***** -->

<nav class="navbar navbar-inverse" id="nav">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Pet-Friendly Venues<span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Shops</a></li>
          <li><a href="#">Cafes</a></li>
          <li><a href="#">Pubs/Bars</a></li>
          <li><a href="#">Restuarants</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    </ul>
  </div>
</nav>



</body>
</html>

【问题讨论】：

当您使用颜色名称时，前面没有#。 # 仅适用于像 #FFFFFF 这样的十六进制值。粉色就是粉色，前面没有#。
哎呀！愚蠢的错误——我厌倦了试图解决这个问题。当我删除 # 时，它仍然没有改变任何东西......
检查元素并检查是否有东西覆盖了你的颜色，然后你可以尝试将它应用到较低级别的层次结构，或者如果你真的想强制它使用 !important ，在你的情况下是 @987654331 @
恐怕没有这样的运气:(在任何层次结构中
<<<<<<< HEAD 这部分是错误还是包含在文件中？

标签： html css twitter-bootstrap twitter-bootstrap-3 navbar

【解决方案1】：

从文件中删除 <<<<<<< HEAD，因为它不是有效的 CSS 语法。

【讨论】：