Question

我可以在Stackoverflow和在线上看到很多不同方法的例子来改变我的bootstrap导航菜单的背景颜色，但它不起作用，我只是不明白为什么。

我尝试删除其他CSS项目，以防它们出现问题。我也尝试从导航div中删除id。

我的HTML：

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Basic Front End Portfolio Page</title>



      <link rel="stylesheet" href="css/style.css">


</head>

<body>
  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div>
<nav class="navbar navbar-default">
<div id="headertitlebar" class="container-fluid">
  <div class="navbar-header">
  <div id="title" class="navbar-brand">
    <p><a href="#" id="logo">johnsonville.net</a></p>
  </div>
  </div>
  <div id="navigation">
    <ul class="nav navbar-nav navbar-right">
      <li class="active"><a href="#">Home</a></li>
      <li class="active"><a href="#">Portfolio</a></li>
      <li class="active"><a href="#">Contact</a></li>
    </ul>
  </div>
</div>
  </nav>
  <div id="mainpage">
    <p>
    <h3>I'm a beginner front end developer but an experienced DBA that is working to gather depth as a full stack developer.
  </div>
  </p>
  <div id="portfoliopage">

  </div>

  <div id="contactpage">

  </div>
</div>


</body>
</html>

我的css：

  #headertitlebar {
  background-color: firebrick;
  padding-left: 50px;
  padding-right: 50px;
}
#title {
  font-family: courier new;
  font-size: 30px;
  font-weight: 900;
}
#logo {
  text-decoration: none; 
  color: black;
}

.nav li {
background: red;
}

Answer 1

将css放在.navbar-default class。

上

.navbar-default {
  background-color: firebrick;
}

始终适合我。希望能帮到你吗？

我尝试了你的样本，1件事是一个问题，你必须在自定义css之前使用bootstrap＆＃39; s css。像：

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Basic Front End Portfolio Page</title>


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


</head>

<body>
  <!-- Latest compiled and minified CSS -->
<style>#headertitlebar {
  background-color: firebrick;
  padding-left: 50px;
  padding-right: 50px;
}
#title {
  font-family: courier new;
  font-size: 30px;
  font-weight: 900;
}
#logo {
  text-decoration: none; 
  color: black;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    background-color: red;
}
</style>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div>
<nav class="navbar navbar-default">
<div id="headertitlebar" class="container-fluid">
  <div class="navbar-header">
  <div id="title" class="navbar-brand">
    <p><a href="#" id="logo">johnsonville.net</a></p>
  </div>
  </div>
  <div id="navigation">
    <ul class="nav navbar-nav navbar-right">
      <li class="active"><a href="#">Home</a></li>
      <li class="active"><a href="#">Portfolio</a></li>
      <li class="active"><a href="#">Contact</a></li>
    </ul>
  </div>
</div>
  </nav>
  <div id="mainpage">
    <p>
    <h3>I'm a beginner front end developer but an experienced DBA that is working to gather depth as a full stack developer.
  </div>
  </p>
  <div id="portfoliopage">

  </div>

  <div id="contactpage">

  </div>
</div>


</body>
</html>

然后你的css不会被bootstrap覆盖。

然后：我为你编辑了这个好吗？新css。

导航栏的背景颜色不使用我的CSS样式

1 个答案: