推特引导折叠导航栏不起作用答案

【问题标题】：twitter bootstrap collapse nav bar not working推特引导折叠导航栏不起作用
【发布时间】：2013-03-15 04:45:43
【问题描述】：

我是 bootstrap 新手，我正在使用最新版本。我想做一个简单的站点，以了解引导程序，但已经有一个我无法解决的问题。导航栏和图标似乎没问题，但是当我单击时，什么也没发生。我已经把我的完整代码放在下面了。

<!-- <!DOCTYPE html>
 <html>
 <head>
         <meta charset="utf-8">
         <title>Getting started with Bootstrap</title>
         <link rel="stylesheet" href="css/bootstrap.css">
         <link rel="stylesheet" href="css/bootstrap-responsive.css">

 <script src="js/bootstrap.js"></script>
 </head>
 <body>-->


<div class="navbar">
   <div class="navbar-inner">
     <div class="container">

      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </a>

        <!-- Be sure to leave the brand out there if you want it shown -->
        <a class="brand" href="#">Site name</a>

        <!-- Everything you want hidden at 940px or less, place within here -->
        <nav class="nav-collapse collapse">
          <!-- .nav, .navbar-search, .navbar-form, etc -->
            <ul class="nav">
                  <li class="active"><a href="#">Home</a></li>
                  <li><a href="#">Link</a></li>
                  <li><a href="#">Link</a></li>
            </ul>

        </nav>

    </div>
  </div>
</div>

【问题讨论】：

始终提供 HTML、CSS、JS 相关问答的演示：JS Bin | jsFiddle
为什么要注释掉 html 文档的顶部？
我已经注释掉了，否则 stackoverflow 不会显示该部分。
我解决了！我忘了包括 jquery 库：P jaja。对不起。
在阅读this post 后，我正要说同样的话。这是一个关于 JS Bin 的工作演示：jsbin.com/atudex/1/edit

标签： css twitter-bootstrap

【解决方案1】：

我对使用 Bootstrap 也有些陌生，我想我可能已经找到了一些解决您问题的方法。看起来您下载了所有库，但您的脑海中可能没有包含所有 jquery、JS 和 Popper.js 链接。

 <!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 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.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

这也发生在我身上，因为我没有链接所有库。因此，请检查是否有任何您没有在脑海中引用的库。

PS：抱歉，我没有使用下载版本的库，所以我无法具体告诉您选择哪些文件和库。

希望它仍然有帮助；）

【讨论】：