2017-04-11 66 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

相关问题