2017-06-05 2 views
0

J'utilise Bootstrap navbar et je voudrais qu'il bascule/se réduit à une largeur de 880px. J'ai essayé d'ajouter des requêtes média pour une largeur de 880px mais cela n'a pas fonctionné. Ceci est mon code css:Réduire/Activer la barre de navigation Bootstrap à une largeur spécifique

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

Répondre

0

Je l'ai trouvé car je cherchais la même solution.

Mise à jour pour 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; 
    } 
} 

Cette personnalisation fonctionne bien. Au lieu de 1200px, écrivez votre taille personnalisée (880px). Si vous voulez lire tout le texte, cliquez ici. Le lien https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint