減少引導程序導航斷點

Question

我正在使用最新版本的Bootstrap，導航欄在1320px處摺疊爲響應視圖。

如何調整此設置，以便導航欄僅摺疊到1280px以下的響應視圖中？我在SO上看到的所有問題都是爲了增加斷點，我希望減少斷點。

Answer 1

感謝您的建議，下面的代碼是爲了減少斷點並保留導航欄的桌面版本所需的。

@media only screen 
    and (min-width: 1170px) { 
    .navbar-toggle { 
     display: none; 
    } 
    .navbar-collapse { 
     width: auto; 
     border-top: 0; 
     -webkit-box-shadow: none; 
     box-shadow: none; 
    } 
    .navbar-collapse.collapse { 
     display: block !important; 
     height: auto !important; 
     padding-bottom: 0; 
     overflow: visible !important; 
    } 
    .navbar-fixed-top .navbar-collapse, .navbar-static-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse { 
     padding-right: 0; 
     padding-left: 0; 
    } 
    .navbar-nav { 
     float: left; 
     margin: 0; 
    } 
    .navbar-nav > li, 
    .navbar-header { 
     float: left; 
    } 
    #navbar-settings { 
     float: right; 
    } 
    .navbar-nav > li > a { 
     padding: 12px 36px; 
    } 
    .navbar-nav > li > .dropdown-menu { 
     margin-top: 0; 
     border-top-left-radius: 0; 
     border-top-right-radius: 0; 
    } 
    .dropdown-menu { 
     position: absolute; 
     top: 100%; 
     float: left; 
     min-width: 160px; 
     padding: 5px 0; 
     margin: 2px 0 0; 
     text-align: left; 
     list-style: none; 
     background-color: #fff; 
     -webkit-background-clip: padding-box; 
     border: 1px solid rgba(0, 0, 0, .15); 
     border-radius: 4px; 
     -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); 
     box-shadow: 0 6px 12px rgba(0, 0, 0, .175); 
    } 
    .navbar-nav .open .dropdown-menu { 
     position: absolute; 
     float: none; 
     width: auto; 
     margin-top: 0; 
     background-color: #fff; 
     border: 1px solid rgba(0, 0, 0, .15); 
     -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); 
     box-shadow: 0 6px 12px rgba(0, 0, 0, .175); 
    } 
    .dropdown-menu > li > a:hover, 
    .dropdown-menu > li > a:focus, 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover { 
     color: #626366 !important; 
     text-decoration: none; 
     background-color: #f5f5f5; 
    } 
} 

Answer 2

你可以寫一個特定的媒體查詢，

@media (max-width: 768px) { 
    .collapse { 
     display: none !important; 
    } 
} 

如果您發佈的代碼，我會更新這個答案給你。