Question

更新事实证明这是一个已知的问题 - 它不会出现在Stack Overflow上的任何搜索中。希望这篇文章能够引起人们对这个问题的关注。

从本质上讲，Twitter Bootstrap从2.2.1开始仍然存在标签下拉功能在移动设备上正常工作的问题。

事实上，在某些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>

有什么想法吗？

Answer 1

使用Bootstrap 2.2.2修复此问题

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

Answer 2

如果您正在谈论使用@fat和@mdo选项的下拉菜单，那么您需要更改您的设计......即使您已将其设置为移动设备，也不会是为您的用户提供舒适的体验..

可能会this link帮助您重新思考您尝试移动设计的设计。

您也可以考虑在没有下拉列表的情况下合并更多标签，或者根据您的要求使用最适合的按钮或链接。

Bootstrap选项卡下拉不适用于移动设备

2 个答案: