导航栏切换按钮不起作用

Question

当我在移动视图中缩小屏幕时，我的切换按钮不起作用。能告诉我原因吗

这是我的代码。先感谢您。

<nav class="navbar navbar-default mmn-navbar">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle mmn-navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapse" aria-expanded="false" style="border: none;">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar" style="height: 7px;border-radius: 0;width: 40px;background: white;"></span>
                <span class="icon-bar" style="height: 7px;border-radius: 0;width: 40px;background: white;"></span>
                <span class="icon-bar" style="height: 7px;border-radius: 0;width: 40px;background: white;"></span>
            </button>
            <a class="navbar-brand managemyngo-font" style="color: white; padding: 1em;" href="#">ManageMyNGO</a>
        </div>
        <div class="collapse navbar-collapse" id="nav-collapse" style="border: none;">
            <div class="nav navbar-nav navbar-right menu-font menu" style="color: white;">
                <?php
                    wp_nav_menu( array( 
                         'theme_location' => 'header-menu', 
                         'container' => 'nav',
                         'container_class' => 'topnav'
                    ) ); 
                ?>
            </div>
        </div>
    </div>
</nav>

Answer 1

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
          </head>
          <body>

    <nav class="navbar navbar-inverse mmn-navbar">
              <div class="container-fluid">
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle mmn-navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapse" aria-expanded="false" style="border: none;">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar" style="height: 7px;border-radius: 0;width: 40px;background: white;"></span>
                    <span class="icon-bar" style="height: 7px;border-radius: 0;width: 40px;background: white;"></span>
                    <span class="icon-bar" style="height: 7px;border-radius: 0;width: 40px;background: white;"></span>
                  </button>
                  <a class="navbar-brand managemyngo-font" style="color: white; padding: 1em;" href="#">ManageMyNGO</a>
                </div>
                <div class="collapse navbar-collapse" id="nav-collapse" style="border: none;">
                    <div class="nav navbar-nav navbar-right menu-font menu" style="color: white;">
                        <?php
                        wp_nav_menu( array( 
                                'theme_location' => 'header-menu', 
                                'container' => 'nav',
                                'container_class' => 'topnav'
                               ) ); 
                        ?>
                    </div>
                </div>
              </div>
            </nav>
  </body>
  </html>

看来它工作正常。我只是将 navbar-default 更改为 navbar-inverse 只是为了使切换菜单可见。确保您没有在页面中两次包含 bootstrap cdn's。

导航栏切换按钮不起作用

nav bar toggle button does not working

html

css

nav

twitter-bootstrap