從導航欄中的圖標切換到標籤

Question

我已經創建了一個使用Bootstrap 3.1.1的網站，並使用響應式設計來允許合攏設備。

使用情況是：

1. 對於桌面版本，導航欄應該顯示圖標
2. 對於較小的寬度，下拉菜單應該會出現，但是使用的，而不是圖標標籤。

我創建了一個JSBin to replicate the scenario

是否有此內置技術，或者我移動到jQuery的時候出現塌陷去除​​類？

Answer 1

創建2 div的內部navbar-collapse div。一個div用於顯示圖標，另一個div用於標籤。在具有標籤的div上使用.visible-xs類，並在由div組成的圖標上使用.visible-sm .visible-md .visible-lg類。

欲瞭解更多詳細覈查​​

代碼示例

<ul class="visible-sm visible-md visible-lg navbar-nav nav"> 
     <li> 
     <a href="#"> 
      <span class="glyphicon glyphicon-home"></span> 
     </a> 
     </li> 
     <li> 
     <a href="#"> 
      <span class="glyphicon glyphicon-question-sign"></span> 
     </a> 
     </li> 
    </ul> 
    <!-- Smaller screen --> 

     <ul class="visible-xs navbar-nav nav "> 
     <li> 
     <a href="#"> 
      <span>Home</span> 
     </a> 
     </li> 
     <li> 
     <a href="#"> 
      <span>Help</span> 
     </a> 
     </li> 
    </ul>