导航栏切换按钮不起作用

问题描述：

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

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

<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>

答

<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两次。

嘿，它的工作我没有包括bootstrap.min.js 谢谢:) –

导航栏切换按钮不起作用

相关推荐