特定の幅でブートストラップのnavbarを折りたたむ/切り替えます

Question

私はブートストラップのnavbarを使用していて、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; 
    } 
} 

ため

UPDATE。 1200pxの代わりにあなたのカスタムサイズ（880px）を書いてください。本文全体を読む場合は、リンク https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint