Question

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

以下是picture显示的内容......

非常感谢任何帮助/建议！：）

＆＃13;

@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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

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

无法自定义使用Bootstrap 3

1 个答案: