Bootstrap 4导航栏不会在大屏幕上折叠

Posted

技术标签:

【中文标题】Bootstrap 4导航栏不会在大屏幕上折叠【英文标题】：Bootstrap 4 navbar not collapsing on large screen 【发布时间】：2018-04-29 23:50:47 【问题描述】：

我正在尝试使用 Bootstrap 4 实现导航栏。目前，当视口缩小到移动设备大小时，导航栏会正确折叠。但是，当尝试切换菜单时，没有任何反应。 jsFiddle 示例演示了这种行为。我也附上了 html。

我已采取的步骤：

删除所有自定义 CSS 确保 jQuery 链接位于 Bootstrap JS 文件之前 页眉和页脚中的脚本标签 从 Bootstrap Docs 复制并粘贴确切的示例（我得到相同的行为） 确保 JS 正在 Chrome 浏览器中使用 使用 WC3 验证器验证的 HTML 当然，阅读 SO 上有关此问题的各种帖子，但都没有解决问题

jsFiddle 链接https://jsfiddle.net/u7v5jba9/

<title>Site title</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<body>
  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light">

      <a class="navbar-brand" href="#">
        <i class="fa fa-globe" aria-hidden="true"></i> Brand Name
      </a>

      <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <i class="fa fa-angle-double-down"></i>
              </button>

      <div class="navbar-collapse collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item"><a href="#" class="nav-link ">Link 1</a></li>
          <li class="nav-item"><a href="#" class="nav-link ">Link 2</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Link 3</a></li>
        </ul>
        <ul class="navbar-nav">
          <li class="nav-item"><a href="#" class="nav-link ">Sign In</a></li>
          <li class="nav-item"><a href="#" class="nav-link ">Register</a></li>
          <li class="nav-item"><a href="#" class="nav-link ">Log Out</a></li>
        </ul>
      </div>
    </nav>
  </div>

  <div class="container">
    <nav class="navbar navbar-inverse fixed-bottom text-center">
      <h6 class="text-light text-center">Footer</h6>
    </nav>
  </div>

  <!-- Scripts -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</body>

【问题讨论】：

检查你的控制台："Uncaught ReferenceError: Popper is not defined" 【参考方案1】：

您需要按照Getting Started Docs 包含 Popper。

将这些用于您的脚本。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

更新的工作小提琴：https://jsfiddle.net/u7v5jba9/1/

建议：以后，请始终在浏览器中打开开发检查器控制台以查找任何错误消息。

【讨论】：

魔术，谢谢你的回复。我正在使用开发检查器，但没有看到错误消息 -.- 您能否解释一下为什么从 CDN 中包含这些文件而不是从项目目录中包含这些文件？我也遇到了同样的问题。 @FatemaT.Zuhora 在项目目录中包含它们应该可以正常工作，前提是您拥有 正确 版本。 我不知道我到底出了什么问题，当我从本地目录下载和使用时它不起作用。我没有为integrity 和crossorigin 使用任何值；只是用了&lt;link rel="stylesheet" href="assets/css/bootstrap.min.css"&gt;【参考方案2】：

您还可以将引导程序引用更改为捆绑版本 - bootstrap.bundle.min.js - 其中包括 popper.js。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

小提琴：https://jsfiddle.net/smoore4/m2dLp71q/

正如@Anand Rockzz 正确指出的那样，您仍然需要在此引用之前添加 jQuery。

【讨论】：

【参考方案3】：

当您错过脚本的顺序时会发生这种情况。 您应该始终按此顺序包含脚本

    jquery.js popper.js bootstrap.js 
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

【讨论】：

以上是关于Bootstrap 4导航栏不会在大屏幕上折叠的主要内容，如果未能解决你的问题，请参考以下文章

Bootstrap 4 导航栏不会在 Angular 4 中折叠

如何让 twitter-bootstrap 导航栏子项在小屏幕上折叠/展开？

仅在折叠位置时如何设置 Bootstrap 5 导航栏的样式？

Bootstrap 3 固定顶部导航栏显示水平滚动

Bootstrap 导航栏在折叠时不会打开

Bootstrap 4导航栏右对齐在移动设备上不折叠的按钮