菜單在移動視圖中的點擊不會擴大

出於某種原因，菜單圖標在移動視圖中未擴展，不知道我做錯了什麼。有人可以看看讓我知道嗎？謝謝！ http://10.60.53.115/staging/sijie/Monster_UX_bootstrap/index.html 菜單在移動視圖中的點擊不會擴大

HTML：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-collapse"> 
      <i class="fa fa-bars"></i> 
     </button> 
     <a href="#" class="navbar-brand"><img class="img-responsive" src="http://media.newjobs.com/homepage/images/Monster_UX/logo.png"></a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right hidden-xs"> 
      <li role="presentation" class="active"><a href="#">About Us</a></li> 
      <li role="presentation"><a href="#projects">What We Do</a></li> 
      <li role="presentation"><a href="#join">Join the Team</a></li> 

      <li class="form"> 
      <form class="search-container" action="//llamaswill.tumblr.com/search"> 
       <input id="search-box" type="text" class="search-box" name="q" /> 
       <label for="search-box"><span class="glyphicon glyphicon-search search-icon"></span></label> 
       <input type="submit" id="search-submit"/> 
      </form> 
      </li> 
     </ul> 

    </div> 
    </div><!--end container-fluid-->

來源

2015-06-30 Sijie Wang

的鏈接無法打開？ –

鏈接可能無法加載，因爲它是內部鏈接。 –

你在導航欄中的不正確的部分設置您的IMG。爲了在點擊時激活移動菜單，您需要將IMG鏈接移至class="navbar-toggle"按鈕。

.navbar .navbar-header .navbar-toggle { 
 
    padding: 6px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 

 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"> 
 
     <img src="http://placehold.it/40x20/000/000"> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Brand</a> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse" id="navbar"> 
 

 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">About Us <span class="sr-only">(current)</span></a> 
 
     </li> 
 
     <li><a href="#">What We Do</a> 
 
     </li> 
 
     <li><a href="#">Join the Team</a> 
 
     </li> 
 
     </ul> 
 

 
     <form class="navbar-form navbar-left" role="search"> 
 
     <div class="form-group"> 
 
      <input type="text" class="form-control" placeholder="Search"> 
 
     </div> 
 
     <button type="submit" class="btn btn-default">Submit</button> 
 
     </form> 
 

 
    </div> 
 

 
    </div> 
 
</nav> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

來源

2015-07-01 06:39:37 vanburen

菜單在移動視圖中的點擊不會擴大

回答

相關問題