在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

在響應渲染的twitter引導中有預定義的類。您可以使用<a class="dropdown-toggle visible-desktop" .../>僅在您提到的大屏幕上顯示。其他可用的類是.visible-phone，.visible-tablet，.hidden-phone，.hidden-tablet，.hidden-desktop。