Question

当我缩小窗口并单击按钮时，它不起作用。按钮没有响应。这里似乎有什么问题可以有人告诉我吗？

<button type="button" 
        class="navbar-toggle" 
        data-toggle="collapse" 
        data-target=".navbar-collapse">

    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

<div class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
        <li>
            <a href="">Page 1</a>
        </li>
        <li>
            <a href="">Page 2</a>
        </li>
        <li>
            <a href="">Page 3</a>
        </li>
    </ul>

库是jQuery 2.1.3和bootstrap 3.3.1。

Answer 1

演示：http://jsfiddle.net/u1s62Lj8/1/

您需要html页面中包含的jquery和bootstrap javascript文件才能使切换工作。

<html>
   <head>
       // stylesheets here
       <link rel="stylesheet" href=""/> 
   </head>
   <body>
      //your html code here

      // js scripts here
      // note jquery tag has to go before boostrap
      <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
   </body>
</html>

Answer 2

您的代码看起来很棒，我唯一看到的是您没有在按钮选择器中包含折叠的类。 http://www.bootply.com/cpHugxg2f8 注意：需要JavaScript插件如果禁用JavaScript并且视口足够窄以致导航栏崩溃，则无法展开导航栏并查看.navbar-collapse内的内容。

响应式导航栏需要将崩溃插件包含在您的Bootstrap版本中。

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

        <nav class="navbar navbar-inverse navbar-static-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Project name</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                    <li><a href="">Page 1</a>
                    </li>
                    <li><a href="">Page 2</a>
                    </li>
                    <li><a href="">Page 3</a>
                    </li>

              </ul>
            </div>
          </div>
        </nav>

      </div>
    </div>

Answer 3

记住在引导js之前加载jquery

Answer 4

浪费了几个小时才意识到我的代码中缺少视口元。以防万一有人错过了。

添加此按钮后，切换开关开始正常工作。

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 5

在 Bootstrap 5 中，数据属性现在在 js 插件中使用“bs”命名，因此例如 data-toggle 将不再起作用，您将需要使用 data-bs-改为切换。

Answer 6

因为您必须具有jquery设置才能启用切换按钮的切换功能。因此，您要做的就是在bootstrap.css之前添加bootstrap.bundle.js：

<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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Answer 7

我遇到了同样的问题。

我在头文件中以错误的顺序添加了 jQuery 和 bootstrap。

我必须在引导之前加载 jQuery，这解决了问题。

Bootstrap Navbar切换按钮不起作用

7 个答案: