Question

我的目标是使用一些菜单链接对网站导航栏进行编码。在小型设备上，应该会出现一个菜单栏，在点击时折叠菜单链接。

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

我可以肯定问题不是加载了引导程序，因为当我将代码从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>

非常感谢提前！亲切的问候

Rysio

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>

导航栏菜单折叠未打开

1 个答案: