导航栏菜单折叠未打开

Question

我的 objective 是编写带有几个菜单链接的网站导航栏。在小型设备上应该会出现一个菜单栏，单击时会折叠菜单链接。

我按照 YouTube 教程学习了如何执行此操作，并且我已经将我的代码与教程中的代码进行了多次比较，但不知何故我的菜单不想折叠。

我可以确定问题不在于加载了 bootstrap，因为当我将 YouTube 教程中的代码复制到我的 Codepen 中时，折叠菜单工作得很好。

如果有人可以查看我的代码并提示我做错了什么，我将不胜感激。

<!--DOCTYPE html -->
<head>
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lemonada">
</head>

<body>
  <header>
    <div class="navbar navbar-default navbar-inverse navbar-fixed-top">
      <div class="container">

        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="#" class="navbar-brand">Company Brand</a>

        </div>

        <div class="collapse navbar-collapse" id="navHeaderCollapse">
          <ul class="nav navbar-nav navbar-right">
            <li>
              <a href="#">Menu 1</a>
            </li>
            <li>
              <a href="#">Menu 2</a>
            </li>
            <li>
              <a href="#">Menu 3</a>
            </li>
            <li>
              <a href="#">Menu 4</a>
            </li>
            <li>
              <a href="#">Menu 5</a>
            </li>
            <li>
              <a href="#">Menu 6</a>
            </li>
          </ul>

        </div>

      </div>
    </div>
  </header>

</body>

<footer>
</footer>

非常感谢！亲切的问候

里西欧

Answer 1

如果您在问题中发布了完整的代码，那么那里有很多错误。

您必须将 <head> 和 <body> 标签包裹在 <html> 内标签。
将你的 <footer> 带入 <body>。
我想即使你没有在问题中发帖，但你必须包括您的脚本。始终在前面包含 jQuery 脚本 BootStrap 脚本。因为 bootstrap.js 需要 jQuery 功能。在之前将它们包括在内总是好的 </body>

这里我包含了 cdn 脚本和 css 以证明代码是正确的。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lemonada">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<body>

<header>


    <div class="navbar navbar-default navbar-inverse navbar-fixed-top">
    <div class="container">
    <div class="navbar-header">
         <button type ="button" class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
      <a href="#" class="navbar-brand">Company Brand</a>

      </div>



        <div class="collapse navbar-collapse" id="navHeaderCollapse">

        <ul class="nav navbar-nav navbar-right">
             <li>
               <a href="#">Menu 1</a>
               </li>
                <li>
               <a href="#">Menu 2</a>
               </li>
                <li>
               <a href="#">Menu 3</a>
               </li>
                <li>
               <a href="#">Menu 4</a>
               </li>
                <li>
               <a href="#">Menu 5</a>
               </li>
                <li>
               <a href="#">Menu 6</a>
               </li>
          </ul>

        </div>

    </div>
    </div>

</header>

<footer>
</footer>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
<html>

导航栏菜单折叠未打开

Navbar Menu Collapse not opening

css

collapse

navbar

twitter-bootstrap