Bootstrap 4 导航栏不会在大屏幕上折叠 [英] Bootstrap 4 navbar not collapsing on large screen

查看：32
本文介绍了Bootstrap 4 导航栏不会在大屏幕上折叠的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

我采取的步骤:

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

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

网站标题<link rel="样式表";类型=文本/css"；href=https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"；/><link rel="样式表";类型=文本/css"；href=https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/><身体><div class="container"><nav class="navbar navbar-expand-lg navbar-light"><a class="navbar-brand";href=#"><i class="fa fa-globe";aria-hidden=真"></i>品牌</a><button class="navbar-toggler collapsed";类型=按钮"数据切换=折叠"数据目标=#navbarSupportedContent"；aria-controls="navbarSupportedContent";aria-expanded="false";aria-label =切换导航"><i class=fa fa-angle-double-down"></i><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 class="navbar-nav"><li class="nav-item"><a href="#";class=nav-link">登录</a></li><li class="nav-item"><a href="#";class=nav-link">注册</a></li><li class="nav-item"><a href="#";class=nav-link">注销</a></li>

</nav>

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

<!-- 脚本--><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js";完整性=sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"crossorigin=匿名"></script><script src=https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

解决方案

您需要根据 入门文档.

将它们用于您的脚本.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF593hXpGoriK"cross匿名"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicFoGinp"crossIp"<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkEk>anJVugt;anJVugt;n</脚本>

更新工作 Fiddle:https://jsfiddle.net/u7v5jba9/1/

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

I am trying to implement a Navbar using Bootstrap 4. Currently, the Navbar correctly collapses when the viewport is shrunk to mobile size. However, when attempting to toggle menu, nothing happens. The jsFiddle example demonstrates this behavior. I have attached the HTML as well.

Steps I have taken:

  • Removing all custom CSS
  • Ensuring jQuery link is before Bootstrap JS file
  • Script tags in the header and the footer
  • Copy and paste exact examples from Bootstrap Docs (and I get the same behavior)
  • Ensuring that JS is being used in the Chrome browser
  • Validated HTML using WC3 validator
  • And of course, read various posts on SO about this issue but none lead to a resolution

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

解决方案

You need to include Popper as per the Getting Started Docs.

Use these for your scripts instead.

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

Updated working Fiddle: https://jsfiddle.net/u7v5jba9/1/

Advice: In future, always open the dev inspector console in your browser to find any error messages.

这篇关于Bootstrap 4 导航栏不会在大屏幕上折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆