Question

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

你知道问题出在哪里吗？

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>

Answer 1

运行代码时 - 使用Chrome浏览器 - 它表示“popper”未定义。

快速谷歌说你需要包含popper库 - 但是如果你使用Bootstrap的Bundle，这已经包含了。

用https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js

替换当前对Bootstrap的CDN引用

这将解决您的问题 - 这是一个有用的代码段：

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

如果您需要澄清我如何解决此问题，请告诉我

单击导航栏按钮时，菜单未显示

1 个答案: