Twitterのブートストラップで折り畳まれたときにドロップダウンのサブアイテムを非表示にする

Question

ナビゲーションバーにドロップダウンメニューがありますが、サブアイテムがかなりあります。これは大画面では問題ありませんが、ナビが倒れたときには、彼らが行っているすべての部屋を占有するほど重要ではありません。

折りたたまれているときにドロップダウンを閉じる方法や、ドロップダウンとサブアイテムを削除してアンカータグ（ユーザーがサブアイテムを選択できるページに移動する）に置き換える方法はありますか？あるいは、私はこれについてすべて間違っていると思いますか？

<!-- Navbar --> 
<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 

     <!-- .btn-navbar is used as the toggle for collapsed navbar content --> 
     <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> 

     <a class="brand" href="/">mybrand</a> 
     <div class="nav-collapse"> 
     <ul class="nav"> 
      <li<{if $contenttemplate == "option1"}> class="active" <{/if}>><a href="/">option1</a></li> 
      <li<{if $contenttemplate == "option2"}> class="active" <{/if}>><a href="/option2">option2</a></li> 
      <li<{if $contenttemplate == "option3"}> class="active" <{/if}>><a href="/option3">option3</a></li> 
      <li<{if $contenttemplate == "dropdown"}> class="dropdown active" style="background-color:rgba(0,0,0,0.5);" 
      <{else}> class="dropdown"<{/if}>> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">lists<b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="/lists/number1">number1</a></li> 
       <li><a href="/lists/number2">number2</a></li> 
       <li><a href="/lists/number3">number3</a></li> 
       <li><a href="/lists/number4">number4</a></li> 
      </ul> 
      </li> 
     </ul> 
     </div><!--/.nav-collapse --> 
    </div> 
    </div> 
</div> 

Answer 1

レスポンスレンダリングのために、事前定義されたクラスのツイッターブートストラップがあります。 <a class="dropdown-toggle visible-desktop" .../>は、前述のように大画面の場合にのみ表示されます。利用可能なその他のクラスは、.visible-phone、.visible-tablet、.hidden-phone、.hidden-tablet、.hidden-desktopです。