更改引導程序的移動導航欄斷點

Question

如果標題混亂，我很抱歉，實際問題很容易理解。

我有一個引導響應導航欄，它在768px斷點處在移動和桌面視圖之間切換。

但是，我希望它保持移動導航欄直到992px斷點。

由於上述768px寬，這是菜單的外觀

所以我增加了一個媒體查詢的CSS來修復

@media (min-width: 768px) and (max-width: 992px) { 
    .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-fixed-top { 
     top: 0; 
     border-width: 0 0 1px; 
    } 
    .navbar-collapse.collapse { 
     display: none!important; 
    } 
    .navbar-nav { 
     float: none!important; 
     margin-top: 7.5px; 
    } 
    .navbar-nav>li { 
     float: none; 
    } 
    .navbar-nav>li>a { 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
    .collapse.in{ 
     display:block !important; 
    } 
} 

現在移動菜單切換爲992px但子菜單沒有顯示在768像素以上和992像素以下的正確位置

我該如何解決這個問題？

我是否正確地進行媒體查詢？

的jsfiddle：https://jsfiddle.net/8zne82d2/7/

Answer 1

你也應該針對.navbar-nav .open .dropdown-menu

嘗試添加這樣的事情：

@media (max-width: 992px) { 
    .navbar-nav .open .dropdown-menu { 
    position: static; 
    float: none; 
    width: auto; 
    margin-top: 0; 
    background-color: transparent; 
    border: 0; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
    } 
} 

例這裏https://jsfiddle.net/8zne82d2/9/