twitter bootstrap響應式菜單在菜單選擇後隨機不會崩潰

我正在使用Twitter Bootstrap響應使用Brightcove App Cloud構建的移動應用程序。當菜單在窄設備上崩潰時，它最終將在菜單選擇後無法摺疊。菜單下方的內容會改變，但菜單不會摺疊。我試圖將它隔離到一個HTML頁面或菜單項位置，但無法看到模式。twitter bootstrap響應式菜單在菜單選擇後隨機不會崩潰

這裏是我的文件相關代碼（這基本上是爲六頁同樣，某些特定CSS外）：

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" /> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
    <meta name="bc-manifest" content="manifest.json" /> 
    <title>Zencoder</title> 
    <link rel="stylesheet" type="text/css" href="http://files.brightcove.com/proxima-nova/font-faces.css"> 
    <link href="stylesheets/brightcove-app-cloud-1.12.min.css" rel="stylesheet"/> 
    <link href="stylesheets/bootstrap.css" rel="stylesheet"> 
    <link href="stylesheets/bootstrap-responsive.css" rel="stylesheet"> 
    <link href="stylesheets/allPagesStyles.css" rel="stylesheet"> 
    <link href="stylesheets/zencoder.css" rel="stylesheet"> 
    </head> 
<body> 

<section id="pageone" class="page"> 
    <header class="header"> 
    <div class="navbar navbar-fixed-top"> 
     <div class="navbar-inner"> 
     <div class="container"> 
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </a> 
      <div class="nav-collapse"> 
      <ul class="nav maintop app-navigation"> 
       <li id="mainNavTargetS"><a class="ss-nav">System Status</a></li> 
       <li id="mainNavTargetBC"><a class="bc-nav">Brightcove</a></li> 
       <li id="mainNavTargetVC"><a class="vc-nav">Video Cloud</a></li> 
       <li id="mainNavTargetAC"><a class="ac-nav">App Cloud</a></li> 
       <li class="active" id="mainNavTargetZC"><a class="zc-nav">Zencoder</a></li> 
      </ul> 
      </div><!-- /.nav-collapse --> 
     </div><!-- /.container --> 
     </div><!-- /.navbar-inner --> 
    </div><!-- /.navbar --> 
    </header>

謝謝你幫了這個（至少對我來說）令人困惑的問題。

-Matt

來源

2013-02-11 mboles57

我原來使用的代碼從列出的教程。這是我的問題。請注意，在教程中，摺疊菜單的菜單顯示按鈕如下所示。

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
</a>

如果你檢查它顯示如下實際Twitter的引導代碼（有一個按鈕，而不是一個錨）

<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button>

當我第一次開始對這個沒有什麼區別的代碼，但我開始改變風格問題開始出現。一旦我匹配原始的Bootstrap代碼，這些問題就消失了。

來源

2013-03-18 17:46:44 mboles57