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