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>
</div>
<div style="float: right; text-align: left; width: 50%;">
<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 -->
上帝保佑你,先生 – Joe