Question

我正在尝试创建一个带有汉堡按钮的引导导航栏，但是它无法正常工作，我不确定为什么。

<link href="https://fonts.googleapis.com/css?family=Raleway:400,700,800" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="jquery.js"></script>
<script src="vue.js"></script>
<!DOCTYPE html>
<html lang="">
    <head>
        <style>
            nav a{
                color: white
            }
            nav {background-color: #1c71b9; }
            .navbar-toggle{border: 3px solid white;}
            .icon-bar{background-color: white;}
            .navbar-brand:hover{background-color: white;
            color: #1c71b9;
            }
            body{margin-top: 50px;}
            h1, h2, h3, h4, h5, h6, p{
                -webkit-font-smoothing: antialiased;
                text-rendering: optimizeLegibility;
            }
            .row + .row{margin-top: 20px;}
        </style>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body>
     <nav class="navbar navbar-fixed-top">
        <div class="container">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
             <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
             </button>
             <a class="navbar-brand" href="index.php">My site</a>
            </div><!--end .navbar-header-->
            <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Subscriptions</a></li>
                <li><a href="#">Templates</a></li>
                <li><a href="#">Stock</a></li>
                <li><a href="#">Login</a></li>
                <li><a href="#">Signup</a></li>
                </ul>
            </div><!--end #navbar-->
         </div><!--end container-->
        </nav>
    </body>
</html>

Answer 1

您的代码有两个问题：

您在<head>标记的之前添加了大部分<html>内容，这是无效的HTML。 <link>，<script>，<style>和<meta>标签应全部放在<head>内。
虽然包含了jQuery（本地副本），但实际上并未包含Bootstrap的JavaScript本身。您使用的是Bootstrap的第3版，因此您需要
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

这是一个有效的更新，我已经更正了您的<head>结构，用托管的替换了您的jQuery本地版本（仅允许该示例运行），并添加了相关的Bootstrap JavaScript： / p>

<!DOCTYPE html>
<html lang="">

<head>
  <link href="https://fonts.googleapis.com/css?family=Raleway:400,700,800" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  
  <!--<script src="jquery.js"></script>-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  <script src="vue.js"></script>
  
  <style>
    nav a {
      color: white
    }
    
    nav {
      background-color: #1c71b9;
    }
    
    .navbar-toggle {
      border: 3px solid white;
    }
    
    .icon-bar {
      background-color: white;
    }
    
    .navbar-brand:hover {
      background-color: white;
      color: #1c71b9;
    }
    
    body {
      margin-top: 50px;
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    
    .row+.row {
      margin-top: 20px;
    }
  </style>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <nav class="navbar navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
             <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
             </button>
        <a class="navbar-brand" href="index.php">My site</a>
      </div>
      <!--end .navbar-header-->
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Subscriptions</a></li>
          <li><a href="#">Templates</a></li>
          <li><a href="#">Stock</a></li>
          <li><a href="#">Login</a></li>
          <li><a href="#">Signup</a></li>
        </ul>
      </div>
      <!--end #navbar-->
    </div>
    <!--end container-->
  </nav>
</body>

</html>

自助汉堡包导航栏将无法正常工作

1 个答案: