当前位置: 首页 > 面试题库 >

Bootstrap 4导航栏崩溃不起作用

解浩渺
2023-03-14
问题内容

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

我已采取的步骤:

  • 删除所有自定义CSS
  • 确保jQuery链接位于Bootstrap JS文件之前
  • 页眉和页脚中的脚本标签
  • 复制并粘贴Bootstrap文档中的确切示例(我得到的行为相同)
  • 确保JS在Chrome浏览器中正在使用
  • 使用WC3验证器验证HTML
  • 当然,请阅读有关此问题的各种文章,但没有一篇文章可以解决
    <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>
    

提前致谢


问题答案:

您需要根据“ 入门文档”包括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>

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



 类似资料:
  • 主要内容:实例,垂直导航栏,实例,居中对齐的导航栏,实例,不同颜色导航栏,实例,品牌/Logo,实例,实例,折叠导航栏,实例,导航栏使用下拉菜单,实例,导航栏的表单与按钮,实例,实例,导航栏文本,实例,固定导航栏,实例,实例导航栏一般放在页面的顶部。 我们可以使用 .navbar 类来创建一个标准的导航栏,后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开,小屏幕垂直堆叠)。 导航栏上的选项可以使用 <ul> 元素并添加 class="na

  • 主要内容:实例,导航对齐方式,实例,垂直导航,实例,选项卡,实例,胶囊导航,实例,导航等宽,实例,胶囊下拉菜单,实例,选项卡下拉菜单,实例,动态选项卡,实例,胶囊状动态选项卡,实例如果你想创建一个简单的水平导航栏,可以在 <ul> 元素上添加 .nav类,在每个 <li> 选项上添加 .nav-item 类,在每个链接上添加 .nav-link 类: 实例 <ul class="nav"> <li class="nav-item"> <a class="nav-link" href="#">Li

  • 问题内容: 我有bootstrap v3。 我在菜单上使用时,它不会切换。我知道该如何使用并建立点击功能,但我认为该功能应包含在引导程序中?那么也许是JavaScript问题? 这是我包含的js / css / bootstrap文件的标头: 这是我的代码: 我可以正确设置吗? (在不相关的注释上,但可能相关吗?当菜单移动时,我单击菜单按钮,它将折叠。尽管再次按下并不会使其崩溃。因此,此问题与另一

  • 我在bootstrap 4中制作了手风琴折叠。它可以工作,但不流畅有人知道如何解决这个问题吗?我尝试制作另一个div并将div放在里面,但什么都没有。这是代码。谢谢!

  • 问题内容: 当前,当浏览器宽度降至768px以下时,导航栏将变为折叠模式。我想将此宽度更改为1000px,所以当浏览器低于1000px时,导航栏将变为折叠模式。我想在不使用LESS的情况下执行此操作,而是在使用手写笔而不是LESS。 我的问题与此问题相同:Bootstrap 3Navbar折叠 但是,这些问题中的所有答案都说明了如何通过更改LESS变量来做到这一点。我没有接触过LESS,我正在使用

  • 使用Bootstrap3,我试图找出如何触发