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

非常感谢大家！这确实有帮助。

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

对于在 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>

自助菜单上的汉堡菜单未打开

3 个答案: