2017-06-05 12 views
0

Ich benutze Bootstrap navbar und möchte es bei 880px Breite umschalten/zusammenfalten. Ich habe versucht, Medienabfragen für 880px Breite hinzuzufügen, aber es hat nicht funktioniert. Dies ist mein CSS-Code:Collapse/Toggle Bootstrap navbar bei bestimmter Breite

@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; 
} 
} 

Antwort

0

Ich fand dies, wie ich für die gleiche Lösung suchte.

UPDATE für Bootstrap 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; 
    } 
} 

Diese Anpassung funktioniert gut. Anstelle von 1200px schreiben Sie Ihre benutzerdefinierte Größe (880px). Wenn Sie den ganzen Text hier lesen möchten, ist der Link https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint

Verwandte Themen