Twitter Bootstrap (v2.2.1) 下拉链接在移动设备上不起作用
Posted
技术标签:
【中文标题】Twitter Bootstrap (v2.2.1) 下拉链接在移动设备上不起作用【英文标题】：Twitter Bootstrap (v2.2.1) dropdown links not working on mobile 【发布时间】：2013-01-09 18:50:42 【问题描述】：我有一个 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>
我在 Mobile Opera、Mobile Firefox 和默认 android 浏览器的 android 手机上对其进行了测试。
【问题讨论】：
【参考方案1】：我发现它是 Bootstrap 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>
【讨论】：
【参考方案2】：我花了很多时间研究 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
希望这可以帮助其他人节省一些时间、头痛和头发。
【讨论】：
以上是关于Twitter Bootstrap (v2.2.1) 下拉链接在移动设备上不起作用的主要内容，如果未能解决你的问题，请参考以下文章
视频分享Twitter前端CSS框架Bootstrap视频教程
为 Twitter 的 Bootstrap 3.x 按钮设计样式
html HTML，CSS，Bootstrap：使用Twitter Bootstrap进行5列布局