单击导航栏按钮时，菜单未出现答案

【问题标题】：When navbar button is clicked the menu is not appearing单击导航栏按钮时，菜单未出现
【发布时间】：2017-12-27 00:06:58
【问题描述】：

相对于使用引导程序的导航栏，我在下面有这个 html。问题是当单击打开导航栏的按钮时，导航栏不会出现。正在导入 jquery 和引导 jquery 文件。

你知道问题出在哪里吗？

工作示例 (http://jsfiddle.net/7fhs23bt/)

html:

<div class="container px-0">
  <nav class="navbar navbar-expand-md navbar-light bg-faded">

    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler navbar-toggler-right" 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 ml-auto d-flex align-items-center">
        <li class="nav-item">
          <a class="nav-link" href="#">Item 1<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item 3</a>
        </li>
      </ul>
    </div>
  </nav>
</div>

【问题讨论】：

这是popper 没有用Bootstrap 和JQuery 再次定义的东西。 stackoverflow.com/questions/46952775/…

标签： twitter-bootstrap

【解决方案1】：

在运行您的代码时 - 并使用 Chrome 的检查器 - 它说“popper”未定义。

一个快速的 Google 说您需要包含 popper 库 - 但是如果您使用 Bootstrap 中的 Bundle，这已经包含了。

将您当前对 Bootstrap 的 CDN 引用替换为 https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js

这将解决您的问题 - 这是一个有效的 sn-p：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js"></script>
<div class="container px-0">
  <nav class="navbar navbar-expand-md navbar-light bg-faded">

    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler navbar-toggler-right" 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 ml-auto d-flex align-items-center">
        <li class="nav-item">
          <a class="nav-link" href="#">Item 1<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Item 3</a>
        </li>
      </ul>
    </div>
  </nav>
</div>

如果您需要任何关于我如何解决此问题的说明，请告诉我

【讨论】：