Ich kann keine Anzeige zuweisen: keine zu einer Umschalttaste

Question

Ich erstelle eine Website, deren Menü toggleable ist. aber wenn ich auf Breitbild bin, wird das Menü immer angezeigt. Ich möchte, dass es nur angezeigt wird, wenn ich auf die Schaltfläche klicke.

in dem HTML-Code, das ist die Taste:

<div class="botonera col-xs-12"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" id="botonMenu"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
</div> 
<div id="navbar" class="navbar-collapse collapse"> 
    <ul class="nav navbar-nav"> 
     <li><a href="#productos"><img class="iconoMenu" src="imagen/iconoMenuProductos.png">Productos</a></li> 
     <li><a href="#contacto"><img class="iconoMenu" src="imagen/iconoMenuContacto.png">Contacto</a></li> 
     <li><a href="#distribuidores"><img class="iconoMenu" src="imagen/iconoMenuDistribuidores.png">Distribuidores</a></li> 
     <li><a href="#cotizacion"><img class="iconoMenu" src="imagen/iconoMenuCotizacion.png">Cotizacion</a></li>      
     <li><a href="#descargas"><img class="iconoMenu" src="imagen/iconoMenuDemos.png">Descargas</a></li> 
     <li><a href="#videos"><img class="iconoMenu" src="imagen/iconoMenuVideos.png">Videos</a></li> 
     <li><a href="#nosotros"><img class="iconoMenu" src="imagen/iconoMenuNosotros.png">Nosotros</a></li> 
     <li><a href="#faq"><img class="iconoMenu" src="imagen/iconoMenuFaq.png">FAQ</a></li> 
    </ul> 
</div> 

und dies ist die CSS:

.navbar-toggle 
{ 
    display: block !important; 
} 
.navbar-collapse.collapse 
{ 
    display: none !important; 
} 
.navbar-nav>li 
{ 
    float: none !important; 
} 
.collapse.in 
{ 
    display:block !important; 
} 

so ist das Problem, das ich schreibe:

.navbar-collapse.collapse 
{ 
    display: none !important; 
} 

aber es ist es nicht nehmen. Ich arbeite auch mit Bootstrap. und ich denke, etwas daran blockiert es. wie kann ich das Menü Kraft kollabiert, wenn es nicht um die Anzeige zu nehmen ist: keine

Answer 1

ich die Lösung gefunden. Sie sehen, ich wurde

.navbar-collapse.collapse 
{ 
    display: none !important; 
} 
.collapse.in 
{ 
    display:block !important; 
} 

die Art, wie ich es geschafft, meine CSS schreiben Griff denen zu erhalten, war nur noch konkreter zu werden. Ich habe das so gemacht:

div#navbar.navbar-collapse.collapse 
{ 
    display: none !important; 
} 
div#navbar.collapse.in 
{ 
    display:block !important; 
} 

Vielen Dank für Ihre Hilfe, ich schätze es wirklich!

Answer 2

Hier sind die Schritte zu erreichen, was Sie wollen:

1. Entfernen Sie die collapsed Klasse von dieser Linie: class="navbar-toggle collapsed" so es wird wie folgt aussehen: class="navbar-toggle"

2. diese Klasse wie diese Ihre css class="navbar-header botonera col-xs-12"

3. bearbeiten navbar-header zu Ihrem botonera div hinzufügen wie folgt:

CSS:

.navbar-header { 
    float: none; 
} 
.navbar-toggle { 
    display: block; 
} 
.navbar-collapse.collapse { 
    display: none!important; 
} 
.navbar-nav { 
    float: none!important; 
} 
.navbar-nav>li { 
    float: none; 
} 
.navbar-collapse.collapse.in{ 
    display:block !important; 
} 

Link zu jsFiddle: https://jsfiddle.net/AndrewL32/8eqdhLwr/1/