汉堡菜单未在引导程序上打开

Question

使用引导程序时，我无法打开汉堡菜单。 有人能告诉我代码有什么问题吗？

我直接从引导网站上提取了代码。 我查看了其他人关于这个问题的问题，但建议的解决方案没有帮助。

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <nav class="navbar fixed-top navbar-expand-lg navbar-light" style="background-color: #ffffff;"> <a class="navbar-brand" href="index.html"> <img src="logo.png" width="200" height="200" class="d-inline-block align-top" alt=""> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="index.html">Home <span class="sr-only"> (current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="portfolio.html">Portfolio </a> </li> <li class="nav-item"> <a class="nav-link" href="about.html">About </a> </li> <li class="nav-item"> <a class="nav-link" href="contact.html">Contact </a> </li> </ul> </div> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <a href="#"></a> <a href="#" class="fa fa-instagram"></a> </div> </nav>

请简单地为我解释一下，因为我是编码新手。 我希望能够在移动设备上打开汉堡菜单。

Answer 1

• data-target和id不一样。
• 您需要jquery和bootstrap.js才能使下拉菜单正常工作。

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <nav class="navbar fixed-top navbar-expand-lg navbar-light" style="background-color: #ffffff;"> <a class="navbar-brand" href="index.html"> <img src="logo.png" width="50" height="50" class="d-inline-block align-top" alt=""> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="index.html">Home <span class="sr-only"> (current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="portfolio.html">Portfolio </a> </li> <li class="nav-item"> <a class="nav-link" href="about.html">About </a> </li> <li class="nav-item"> <a class="nav-link" href="contact.html">Contact </a> </li> </ul> </div> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <a href="#"></a> <a href="#" class="fa fa-instagram"></a> </div> </nav> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

Answer 2

对于在 bootstrap 5 中寻找解决方案的人，您应该将data-target替换为data-bs-target 。

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#forum_navbar"
            aria-controls="forum_navbar" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

Answer 3

非常感谢大家！ 这真的很有帮助。

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> <nav class="navbar fixed-top navbar-expand-lg navbar-light" style="background-color: #ffffff;"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="index.html">Home <span class="sr-only"> (current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="portfolio.html">Portfolio </a> </li> <li class="nav-item"> <a class="nav-link" href="about.html">About </a> </li> <li class="nav-item"> <a class="nav-link" href="contact.html">Contact </a> </li> </ul> </div> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <a href="#"></a> <h1>HEY HEY HEY!<br/><i class="fas fa-yin-yang fa-spin"></i></h1> </div> </nav>

Answer 4

有时人们只导入 Bootstrap CSS CDN 链接。 他们还需要为汉堡菜单等导入 JavaScript SDN 链接。

Answer 5

需要注意的是data-bs-target的#引用了 id。 一开始我没有注意到这个小元素，点击后汉堡菜单不起作用。