Bootstrap 4 Navbar Toggle 不起作用（粘贴在下面的代码）答案

【问题标题】：Bootstrap 4 Navbar Toggle not working (code pasted below)Bootstrap 4 Navbar Toggle 不起作用（粘贴在下面的代码）
【发布时间】：2019-11-08 11:57:52
【问题描述】：

我无法让引导切换按钮在浏览器上工作，我该如何识别问题？

PS 我已经在 head 标签中添加了 Bootstrap CDN，并在 body 中添加了 jQuery 和 JavaScript。

<nav class="navbar navbar-dark bg-dark navbar-expand-md">
      <a href="#" class="navbar-brand">NAVBAR</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data- 
      target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" 
      aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="#navbarSupportedContent">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a href="#" class="nav-link">HOME</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">ABOUT</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">TICKETS</a>
          </li>
        </ul>
      </div>
    </nav>

【问题讨论】：

欢迎来到 Stack Overflow！投票结束，因为这个问题是由无法再复制的问题或简单的印刷错误引起的。虽然类似的问题可能是这里的主题，但这个问题的解决方式不太可能帮助未来的读者。

标签： html css bootstrap-4 nav

【解决方案1】：

id 属性不应以 # 开头。应该是：id="navbarSupportedContent"

<nav class="navbar navbar-dark bg-dark navbar-expand-md">
    <a href="#" class="navbar-brand">NAVBAR</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a href="#" class="nav-link">HOME</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">ABOUT</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">TICKETS</a>
            </li>
        </ul>
    </div>
</nav>

https://www.codeply.com/p/xYH3DTrwlt

【讨论】：

哦，我的错……我只是删除了“#”，但它似乎仍然不起作用
没有别的事情可做，因为我无法重现该问题。检查您的环境。

【解决方案2】：

试试这个

删除 .navbar-expand-md 类以始终隐藏导航栏链接并显示切换按钮。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a href="#" class="nav-link">HOME</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">ABOUT</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">TICKETS</a>
          </li>
        </ul>
      </div>
</nav>


</body>
</html>

【讨论】：

非常感谢！！有用：）。如果您不介意我问，我在代码中犯了什么错误？
我对此投了反对票，因为我认为“尝试此代码”不是很有指导意义。如果可以添加解释，我将非常乐意投票或取消投票。
删除 .navbar-expand-md 类以始终隐藏导航栏链接并显示切换按钮。

【解决方案3】：

下拉菜单基于第三方库 Popper.js 构建，该库提供动态定位和视口检测。请务必在 Bootstrap 的 JavaScript 之前包含 popper.min.js 或使用包含 Popper.js 的 bootstrap.bundle.min.js / bootstrap.bundle.js。

popper.js.org

这是写在 Bootstrap 文档中的）））

【讨论】：

我确实包含了 popper.min.js

【解决方案4】：

data-target="#navbarSupportedContent"

# 符号代表 id。

问题就在这里：

id="#navbarSupportedContent"

这应该是

id="navbarSupportedContent"

【讨论】：