關於除大型以外的所有尺寸的摺疊導航欄

Question

我的項目中有一個簡單的自舉導航欄。引導例如頁面上，如證實：https://getbootstrap.com/examples/navbar/

我希望能夠將其摺疊，僅顯示小脫字圖標，展開在所有屏幕尺寸菜單中的「像手機」，除了大。

我想僅在大於1200px的屏幕上顯示完整菜單。

在我們的項目中，我們無法修改基本引導scss文件，因爲它在子項目中廣泛使用。

我試着用visible-lg-block上的菜單項的導航欄，切換按鈕和hidden-sm hidden-xs hidden-md玩，但預期它不工作。 Carret圖標顯示在品牌文本的右側，而不是拉到導航欄的右側。我試着拉右，沒有任何效果。

你有什麼想法如何實現這一目標？

Answer 1

只需使用媒體查詢並重寫navbar css類，如下所示將它們保持在摺疊模式，直到最大尺寸爲1200px。在css文件中添加以下css規則，並確保在head標籤中的引導css文件鏈接之後立即添加此自定義css文件。

/*To keep the navbar collapsed on less or equal to 1200px screens size*/ 
    @media (max-width: 1200px) { 
    .navbar-header { 
      float: none; 
     } 

    .navbar-toggle { 
      display: block; 
     } 

    .navbar-collapse { 
      border-top: 1px solid transparent; 
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
     } 

    .navbar-collapse.collapse { 
      display: none!important; 
     } 

    .navbar-collapse.collapse.in { 
      display: block !important; 
     } 

    .navbar-nav { 
      float: none!important; 
      margin: 7.5px -15px; 
     } 

    .navbar-nav > li { 
      float: none; 
     } 

    .navbar-nav > li > a { 
      padding-top: 10px; 
      padding-bottom: 10px; 
     } 
    } 

示例代碼：http://codepen.io/Nasir_T/pen/jVaQyX