Bootstrap 3：導航菜單導航菜單可以像導航欄一樣崩潰嗎？

Question

我知道Bootstrap 3附帶一個在小屏幕上查看時會摺疊的導航欄。但是，我不喜歡導航欄的外觀，並決定使用nav-pills類來設置我的主導航菜單。在電話設備上查看導航菜單時是否可以摺疊導航菜單？這裏是我的導航代碼：

<nav> 
    <ul class="nav nav-pills"> 
     <li><a href="#"><strong>HOME</strong></a></li> 
     <li class="active"><a href="#"><strong>CAPABILITIES</strong></a></li> 
     <li><a href="#"><strong>Careers</strong></a></li> 
     <li><a href="#"><strong>Contracts</strong></a></li> 
     <li><a href="#"><strong>About Us</strong></a></li> 
     <li><a href="#"><strong>News</strong></a></li> 
     <li><a href="#"><strong>Contact us</strong></a></li> 
    </ul> 
</nav> 

Answer 1

這裏是在Youtube上的視頻，顯示它是如何做： Bootstrap 3.1 Tutorial 1 - Responsive Grid Layouts By Default!

基本上戴夫確實在這段視頻中，他讓2個導航欄，一個同其它導航藥丸導航欄。 Nabvar僅在xs大小中可見，nav-pills在xs中隱藏。

Answer 2

沒關係，我最終只是隱藏了菜單時，屏幕是手機，然後用一個下拉菜單出現在地方的那個。

Answer 3

<nav> 
    <ul class="nav nav-pills visible-sm visible-xs"> 
     <li><a href="#"><strong>HOME</strong></a></li> 
     <li class="active"><a href="#"><strong>CAPABILITIES</strong></a></li> 
     <li><a href="#"><strong>Careers</strong></a></li> 
     <li><a href="#"><strong>Contracts</strong></a></li> 
     <li><a href="#"><strong>About Us</strong></a></li> 
     <li><a href="#"><strong>News</strong></a></li> 
     <li><a href="#"><strong>Contact us</strong></a></li> 
    </ul> 
</nav>