3

更新 原来这是一个已知问题 - 它根本不会出现在 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>

有任何想法吗?

4

2 回答 2

3

Bootstrap 2.2.2 修复了这个问题

https://github.com/twbs/bootstrap/wiki/Changelog

于 2012-12-14T12:27:51.423 回答
0

如果您正在谈论下拉菜单@fat@mdo选项,那么您需要更改您的设计..因为即使您让它在移动设备上工作,那么它对您的用户来说也不会是一个舒适的体验..

可能此链接将帮助您重新考虑您正在尝试的移动设计。

您也可以考虑在没有下拉菜单的情况下合并更多选项卡,或者可以使用按钮或链接,根据您的要求选择最适合的选项。

于 2012-11-16T07:33:36.053 回答