Twitter Bootstrap（v2.2.1）下拉链接无法在移动设备上工作

我有一个Twitter Bootstrap（v2.2.1）可折叠导航栏和下拉按钮。他们在我的桌面浏览器中工作得非常愉快，而且如果我将桌面浏览器窗口调整到移动大小，他们将愉快地工作。Twitter Bootstrap（v2.2.1）下拉链接无法在移动设备上工作

但是，在移动设备上，当您点击下拉菜单时，下拉菜单会打开，但点击下拉菜单中的任何链接只会导致下拉菜单关闭，而不会跟随链接。

这看起来类似于this other SO question，但解决方案是将data-toggle="dropdown"移动到我已经拥有它们的位置。

这里有一个下拉按钮的页面上的HTML：

<html> 
<head> 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" /> 
</head> 
<body> 
<div class="btn-group"> 
    <a class="btn btn-primary" href="link1.php"> 
     Dropdown button 
    </a> 
    <a class="btn btn-primary dropdown-toggle" href="#" data-toggle="dropdown"> 
     <span class="caret"></span> 
    </a> 
    <ul class="dropdown-menu"> 
     <li class="nav-header">Recent</li> 
     <li><a href="http://google.com">Google</a></li> 
     <li><a href="http://bing.com">Bing</a></li> 
    </ul> 
</div> 
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script> 
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script> 
<script type="text/javascript"> 
    /** 
    * Twitter Bootstrap JQuery 
    */ 
    //!function ($) { 
     $(function() { 
      $('.dropdown-toggle').dropdown(); 
     }); 
    //} 
</script> 
</body> 
</html>

我测试了它在移动歌剧，移动Firefox和默认的Android浏览器的Android手机。

enter image description here

来源

2013-01-09 icc97

我已经跟踪它在引导错误2.2.1 changelog for 2.2.2状态：

下拉框：临时的解决办法增加了对手机的下拉列表中，以防止他们从早期关闭。

如果我将我的站点上的bootstrap.js从v2.2.1更换为v2.2.2，那么按钮开始工作。

所以，现在，如果我使用最新的v2.2.2 Bootstrap在jsFiddle上查看此代码，那么它的工作原理。

<html> 
<head> 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" /> 
</head> 
<body> 
<div class="container"> 
<div class="btn-group"> 
    <a class="btn btn-primary" href="link1.php"> 
     Dropdown button 
    </a> 
    <a class="btn btn-primary dropdown-toggle" href="#" data-toggle="dropdown"> 
     <span class="caret"></span> 
    </a> 
    <ul class="dropdown-menu"> 
     <li class="nav-header">Recent</li> 
     <li><a href="http://google.com">Google</a></li> 
     <li><a href="http://bing.com">Bing</a></li> 
    </ul> 
</div> 
</div> 
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script> 
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script> 
<script type="text/javascript"> 
     $(function() { 
      $('.dropdown-toggle').dropdown(); 
     }); 
</script> 
</body> 
</html>

来源

2013-01-26 17:44:59 icc97

我花了很多时间在BS 3.0.2研究此错误，甚至原来的开发商似乎已经关闭了这个问题，因为在iOS 6.1.3的问题。至于显示在下一个对象后面的下拉导航栏，由于某种原因，iOS 6.1.3 z-index被覆盖。因为我非常接近推出我的新网站，所以我不想重新设计这个网站。我使用

<nav class="navbar navbar-default" role="navigation" style="z-index:1000;">中的在线样式替代解决了我的问题。

这似乎也解决了一些其他问题。由于它已关闭，我不能在这里发布我的解决方案https://github.com/twbs/bootstrap/issues/10027

希望这可以帮助别人节省一些时间，头痛和头发。

来源

2014-01-30 19:08:41 user2197018

Twitter Bootstrap（v2.2.1）下拉链接无法在移动设备上工作

回答

相关问题