更新 原来这是一个已知问题 - 它根本不会出现在 Stack Overflow 上的任何搜索中。希望这篇文章能引起人们对这个问题的关注。
从本质上讲,2.2.1 版的 Twitter Bootstrap 仍然存在标签下拉功能在移动设备上正常工作的问题。
事实上,在某些 Android 和 iOS 版本上查看时,即使他们自己在上述链接上的文档也无法正常工作。要在您的设备上进行测试,请尝试使用此处的下拉菜单:http: //twitter.github.com/bootstrap/javascript.html#tabs
有关此问题的更多解决方案和进展,请参阅 Twitter Bootstrap Github 存储库以获取更多详细信息:https ://github.com/twitter/bootstrap/issues/4550
///////////////////////////////////////// ///////////////////
使用带有标准文档的 Twitter Bootstrap 2.2.1 样板文件(css、js)我无法在移动设备上使用下拉选项卡(在浏览器和 Chrome 中的 Android 4.1 上测试)
这是代码:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<script src="./js/jquery-1.8.2.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script>
$('#myTab a').click(function (e) {e.preventDefault();
$(this).tab('show');
})
</script>
</head>
<body>
<div class="row">
<div class="span12">
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#dropdown1" data-toggle="tab">@fat</a></li>
<li><a href="#dropdown2" data-toggle="tab">@mdo</a></li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>Raw</p>
</div>
<div class="tab-pane fade" id="profile">
<p>Food</p>
</div>
<div class="tab-pane fade" id="dropdown1">
<p>Etsy</p>
</div>
<div class="tab-pane fade" id="dropdown2">
<p>Trust</p>
</div>
</div>
</div>
</div>
</body>
</html>
有任何想法吗?