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

Question

I have a Twitter Bootstrap (v2.2.1) collapsable navbar and dropdown buttons. 我有一个Twitter Bootstrap（v2.2.1）可折叠的导航栏和下拉按钮。 They work all chirpy and happy in my desktop browser and also if I resize down my desktop browser window down to mobile size they work happily. 他们在我的桌面浏览器中工作得非常愉快和快乐，如果我将桌面浏览器窗口缩小到移动尺寸，他们也会愉快地工作。

However on a mobile, the dropdowns will open up when you click on the dropdown but clicking on any of the links within the dropdown just causes the dropdown to close without following the link. 但是，在移动设备上，当您单击下拉列表时，下拉列表将会打开，但单击下拉列表中的任何链接只会导致下拉列表关闭而不会关注该链接。

This seems similar to this other SO question , but the solution there was to move the data-toggle="dropdown" to the place I have them already. 这似乎与其他SO问题类似，但解决方案是将data-toggle="dropdown"到我已经拥有它们的地方。

Here's the html on the page for the dropdown buttons: 这是下拉按钮页面上的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>

I tested it on an android mobile in the Mobile Opera, Mobile Firefox and default android browser. 我在移动Opera，移动Firefox和默认的android浏览器的Android手机上测试了它。

在此输入图像描述

Answer 1

I've tracked it down to a bug in Bootstrap 2.2.1 the changelog for 2.2.2 states: 我已将其跟踪到Bootstrap 2.2.1中的2.2.2状态的更改日志中的错误：

Dropdowns : Temporary fix added for dropdowns on mobile to prevent them from closing early. 下拉列表 ：为移动设备上的下拉列表添加了临时修复，以防止它们提前关闭。

If I swapped the bootstrap.js on my site from v2.2.1 to v2.2.2 then the buttons start working. 如果我将我的站点上的bootstrap.js从v2.2.1交换到v2.2.2，那么按钮就会开始工作。

So now, if I view this code on jsFiddle using the latest v2.2.2 Bootstrap then it works. 所以现在，如果我使用最新的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>

Answer 2

I spent a lot of time researching this bug on BS 3.0.2 and even the original developers seem to have closed this issue as an iOS 6.1.3 issue. 我花了很多时间研究BS 3.0.2上的这个bug，甚至原来的开发人员似乎也把这个问题作为iOS 6.1.3问题关闭了。 As for the dropdown nav showing behind the next following object, iOS 6.1.3 z-index is overwritten for some reason. 对于显示在下一个对象后面的下拉导航，iOS 6.1.3 z-index由于某种原因被覆盖。 Because I was so close to launching my new site, I did not want to redesign this. 因为我非常接近启动我的新网站，所以我不想重新设计它。 I fixed my issues with this with an in line style override in the 我通过在线样式覆盖修复了我的问题

<nav class="navbar navbar-default" role="navigation" style="z-index:1000;"> . <nav class="navbar navbar-default" role="navigation" style="z-index:1000;"> 。

This also seemed to fix some other issues. 这似乎也解决了一些其他问题。 Since it was closed I couldn't post my solution to it here https://github.com/twbs/bootstrap/issues/10027 由于它已关闭，我无法在此处发布我的解决方案https://github.com/twbs/bootstrap/issues/10027

Hope this helps someone else save some time, head ache and hair. 希望这可以帮助别人节省一些时间，头疼和头发。

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

问题描述

2 个解决方案

解决方案1
8 已采纳 2013-01-26 17:44:59

解决方案2
0 2014-01-30 19:08:41

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

问题描述

2 个解决方案

解决方案1 8 已采纳 2013-01-26 17:44:59

解决方案2 0 2014-01-30 19:08:41

解决方案1
8 已采纳 2013-01-26 17:44:59

解决方案2
0 2014-01-30 19:08:41