2017-04-11 79 views
0

請參閱以下herokuapp。Bootstrap Mobile下拉菜單可在模擬視口上工作,但實際上並不在移動設備上?

https://islandrelief.herokuapp.com/

在桌面上,當瀏覽器尺寸小的下拉菜單點擊。但是在移動設備上,它根本不想被點擊!從我的iPhone 5,至少這是導航欄代碼:

<!-- navbar --> 
    <div class="navbar navbar-default navbar-static-top"> 
    <div class="container-fluid"> 
     <div class="container"> 
     <div class="navbar-header" style="height: 130px"> 
      <a href="#" class="navbar-brand"><img src="http://i.imgur.com/ZrE6KrY.png" style="width: 150px"></a> 
      <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <i class="fa fa-bars"></i> 
      </a> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-right navbar-nav"> 
      <li class="login-mobile"><br> 
       <div style="float: left; width: 50%; text-align: right;"> 
       <button class="btn btn-primary">Sign up</button>&nbsp; 
       </div> 
       <div style="float: right; text-align: left; width: 50%;"> 
       &nbsp;<button class="btn btn-success" >Login</button> 
       </div> 
      </li> 
      <li> 
       <a class="navbar-link-custom" style="padding-left: 8px; padding-right: 8px;" href="#">ABOUT US</a> 
      </li> 
      <li> 
       <a class="navbar-link-custom" style="padding-left: 8px; padding-right: 8px;"href="#">ATTRACTIONS</a> 
      </li> 
      <li> 
       <a class="navbar-link-custom" style="padding-left: 8px; padding-right: 8px;"href="#">EVENTS</a> 
      </li> 
      <li> 
       <a class="navbar-link-custom" style="padding-left: 8px; padding-right: 8px;"href="#">LATEST</a> 
      </li> 
      <li> 
       <a class="navbar-link-custom" style="padding-left: 8px; padding-right: 8px;"id="rightMostLink" href="#">CONTACT US</a> 
      </li> 
      <li> 
       <a class="navbar-link-custom socialIcon" >|</a> 
      </li> 
      <li> 
       <a class="navbar-link-custom sm socialIcon" href="#"><i class="fa fa-facebook"></i></a> 
      </li> 
      <li> 
       <a class="navbar-link-custom sm socialIcon" href="#"><i class="fa fa-twitter"></i></a> 
      </li> 
      <li> 
       <a class="navbar-link-custom sm socialIcon" href="#"><i class="fa fa-instagram"></i></a> 
      </li> 
      <li> 
       <a class="navbar-link-custom sm socialIcon" href="#"><i class="fa fa-snapchat"></i></a> 
      </li> 
      </ul> 
     </div> 
     </div>  
    </div> 
    </div><!-- /.navbar --> 

回答

1

<a class="navbar-toggle">需要連接,使其在移動Safari瀏覽器點擊一個href。更新到:

<a href="#" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 

修復了我的問題。

+0

上帝保佑你,先生 – Joe

相關問題