navbar-toggle fonctionne une fois puis disparaît - twitter-bootstrap, twitter-bootstrap-3

J'essaie d'obtenir un menu basé sur Bootstrap 3 pourfonctionne correctement. Le problème est qu'il fonctionne bien une fois (ouverture puis fermeture du menu) via le bouton de navigation-bascule, mais que le symbole de navigation-bascule disparaît tout simplement. J'ai fait quelques recherches et la page charge d'abord jquery.js puis bootstrap.js. Le menu comprend une barre de navigation supérieure et une barre latérale, les éléments des deux sont correctement insérés dans le menu replié et basculent une fois fonctionne peachy. Cependant, il est impossible de basculer deux fois en raison du bouton manquant.

Voici le code en question:

<nav class="navbar navbar-inverse navbar-fixed-top" data-role="navbar">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="/images/images/logo2.png" style="height:35px" /></a>
</div>

<div class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.php"><img src="/images/images/home.png" class="img" /></a></li>
<li><a href="#"><img src="/images/images/yyv.png" alt="" class="img" /></a></li>
<li><a href="#"><img src="/images/images/cxy.png" alt="" class="img" /></a></li>
<li><a href="#"><img src="/images/images/xxy.png" alt="" class="img" /></a></li>
<li><a href="content_contact.php"><img src="/images/images/kontakt.png" alt="Impressum" class="img" /></a></li>
</ul>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav side-nav">
<li id="home" class="active"><a href="#"><i class="fa fa-cloud"></i> Home</a></li>
<li id="manage-users"><a href="#"><i class="fa fa-users fa-fw"></i> Users</a></li>
<li id="ges"><a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> Lorem</a></li>
<li id="dropdown" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-exchange fa-fw"></i> Ipsum <b class="caret"></b></a>
<ul class="dropdown-menu" id="extra_content"></ul>
</li>
</ul>
</div>

Réponses:

Vous avez du CSS qui remplace le comportement Bootstrap par défaut (en masquant le bouton bascule) ...

.collapsed{
display             : none;
border              : 0;
}

Le bouton bascule fonctionne une fois que vous l'avez supprimé.

http://jsfiddle.net/kTyLg/