Bootstrap 3.3.5 - 导航栏切换按钮无法在iphone上工作

问题描述：

我正在使用自举网站，并且在我的iphone和ipad上查看时遇到了导航栏切换问题。下拉按钮可见，但不响应或展开。似乎在我的电脑的所有浏览器中运行良好。Bootstrap 3.3.5 - 导航栏切换按钮无法在iphone上工作

我使用的引导v3.3.5和jQuery-1.11.3

<head> 

    <!-- Website Title & Description for Search Engine purposes --> 
    <title></title> 
    <meta name="description" content=""> 

    <!-- Mobile viewport optimized --> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 

    <!-- Bootstrap CSS --> 
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="bootstrap/fonts/bootstrap-glyphicons.css" rel="stylesheet"> 

    <!-- Custom CSS --> 
    <link href="includes/css/styles.css" rel="stylesheet"> 
    <link href="includes/css/fonts.css" rel="stylesheet"> 
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Arvo' rel='stylesheet' type='text/css'> 

    <!-- Include Modernizr in the head, before any other Javascript --> 
    <script src="includes/js/modernizr-2.6.2.min.js"></script> 

</head>

这里是我的导航栏

<!--Navbar--> 
<div class="navbar" role="navigation"> 
    <div class="container"> 

     <!--navbar responsive toggle--> 
     <div class="navbar-header"> 
      <button class="navbar-toggle collapsed" type="button" data-target="#navbar-responsive-collapse" data-toggle="collapse" > 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <!-- brand and toggle grouped together for better mobile display --> 
      <img class="navbar-brand" src="images/navbar_logo.png" alt="logo"> 
     </div><!--end of navbar-header--> 

     <div class="collapse navbar-collapse" id="navbar-responsive-collapse"> 
      <ul class="nav navbar-nav navbar-default" id="myNav"> 
       <li class="active"> 
        <a href="index.html"> Home</a> 
       </li> 
       <li> 
        <a href="services.html"> Services</a> 
       </li> 
       <li> 
        <a href="contact.html"> Contact</a> 
       </li> 
      </ul> 
     </div><!-- end of collapse--> 
    </div><!-- end of container--> 
</div><!-- end of navbar -->

底部的链接。

<!-- All Javascript at the bottom of the page for faster page loading --> 

<!-- First try for the online version of jQuery--> 
<script src="http://code.jquery.com/jquery.js"></script> 

<!-- If no online access, fallback to our hardcoded version of jQuery --> 
<script>window.jQuery || document.write('<script src="includes/js/jquery-1.11.3.min.js"><\/script>')</script> 

<!-- Bootstrap JS --> 
<script src="bootstrap/js/bootstrap.min.js"></script>

这里是一个js.fiddle，如果你想看到的CSS：https://jsfiddle.net/Dinkledine/asLLydyz/8/

我已经看到了类似的帖子这一点，而这些都是我收集的解决方法。到目前为止，他们都没有工作。所以我开始认为它是我的标记。

IVE尝试：从v3.3.4到v3.3.5 更新自举.....从1.8.2 更新jQuery来1.11.3 ..... 取代 “ontouchstart” 到 “禁止-ontouchstart” in bootstrap.min.css

感谢您的帮助！

不确定这是否相关。但是，如果我删除.navbar-collapse类，那么下拉菜单会在我的iphone和我的浏览器中响应。然而，它会将所有内容压低。我希望将下拉菜单扩展到以下内容。 – Dinkledine

答

Bootstrap v2 Dropdown Navigation not working on Mobile Browsers

iPhone上的Safari只支持Click事件<a>和<input>元素。

你可以在这里找到你的修复。

Bootstrap 3.3.5 - 导航栏切换按钮无法在iphone上工作

相关推荐