以特定寬度摺疊/切換Bootstrap導航欄

Question

我使用Bootstrap導航欄並希望它以880px寬度切換/摺疊。我試圖添加媒體查詢880px寬度，但它沒有奏效。這是我的CSS代碼：

@media (min-width: 880px) { 
.navbar-collapse { 
    width: auto !important; 
    border-top: 0 !important; 
    -webkit-box-shadow: none !important; 
    box-shadow: none !important; 
} 
.navbar-collapse.collapse { 
    display: block !important; 
    height: auto !important; 
    padding-bottom: 0 !important; 
    overflow: visible !important; 
} 
.navbar-collapse.in { 
    overflow-y: visible; 
} 
.navbar-fixed-top .navbar-collapse, 
.navbar-static-top .navbar-collapse, 
.navbar-fixed-bottom .navbar-collapse { 
    padding-right: 0 !important; 
    padding-left: 0 !important; 
} 
.container > .navbar-header, 
.container-fluid > .navbar-header, 
.container > .navbar-collapse, 
.container-fluid > .navbar-collapse { 
    margin-right: 0 !important; 
    margin-left: 0 !important; 
} 
} 

Answer 1

，我發現這是我一直在尋找同樣的解決方案。

更新引導3.1

@media (max-width: 1200px) { 
.navbar-header { 
    float: none; 
} 
.navbar-left,.navbar-right { 
    float: none !important; 
} 
.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; 
    } 
} 

這種定製效果很好。而不是1200px編寫自定義大小（880px）。如果您想閱讀全文，請點擊鏈接 https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint