Twitter Bootstrap（v2.2.1）下拉鍊接無法在移動設備上工作

我有一個Twitter Bootstrap（v2.2.1）可摺疊導航欄和下拉按鈕。他們在我的桌面瀏覽器中工作得非常愉快，而且如果我將桌面瀏覽器窗口調整到移動大小，他們將愉快地工作。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>

我測試了它在移動歌劇，移動Firefox和默認的Android瀏覽器的Android手機。

enter image description here

來源

2013-01-09 icc97

我已經跟蹤它在引導錯誤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>

來源

2013-01-26 17:44:59 icc97

我花了很多時間在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

希望這可以幫助別人節省一些時間，頭痛和頭髮。

來源

2014-01-30 19:08:41 user2197018

Twitter Bootstrap（v2.2.1）下拉鍊接無法在移動設備上工作

回答

相關問題