Question

我是bootstrap的新手，我正在使用上一个版本。我想做一个简单的网站，去了解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>

Answer 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：对不起，我没有使用这些库的下载版本，所以我不能特别告诉您要选择哪些文件和库。

希望它还是有帮助的；）

twitter bootstrap折叠导航栏不工作

1 个答案: