Barre de navigation de l'effondrement ne se développe pas avec la liste déroulante après avoir cliqué sur elle

Donc, j'ai commencé à utiliser Bootstrap 3, et je veux que mon en-tête pour être fixé au dessus, le contenu qu'il aligné verticalement avec le contenu dans le corps, et enfin, réactif.

Tout fonctionne bien sauf qu'en cliquant sur effondré navbar ne semble pas fonctionner. En cliquant sur la petite icône avec trois bars les uns sur les autres ne me montre ma liste ci-dessous.

Je sais que cela pourrait être une erreur très basique mais en cliquant sur ce gamin, ici, ne fonctionne pas:

Barre de navigation de l'effondrement ne se développe pas avec la liste déroulante après avoir cliqué sur elle

Je pense que j'ai peut-être fait quelque chose de mal avec des cours dans mon en-tête.

C'est mon code:

<header class="navbar  navbar-default navbar-fixed-top" role="banner">
<div class="col-10">
<div class="container">
  <div class="navbar-header">
    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-ex1-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="#">Logo Text</a>
  </div>

  <nav class="collapse navbar-collapse" role="navigation">
    <ul class="nav navbar-nav navbar-right">
      <li class="home_button"> <a href="#"> <span class="glyphicon glyphicon-home"></span> </a> </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li> <a href="#" > My Account </a> </li><br>
          <li> <a href="#"> Logout </a> </li>
        </ul>
      </li>
    </ul>
  </nav>
  </div>
</div>
</header>

La seule chose que j'ai dans mon css personnalisé:

@media (min-width: 980px){
    body{
        padding-top: 70px;
    }
}

mais je ne pense pas que ce serait à l'origine de ce problème.

Les choses que j'ai compris, avant de ma tête, dans mon code html:

<script src="/static/js/jquery-1.10.2.min.js"></script>
<script src="/static/js/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="/static/js/bootstrap-3.0.0-min.js"></script>
<link href="/static/css/bootstrap-3.0.0.css" rel="stylesheet" media="screen">
<link href="/static/app/bssgame2/css/my_custom.css" rel="stylesheet" media="screen">

qui sont dans mon répertoire local.

De la recherche pour "effondrement pas de travail"/"effondrement cliquez sur ne travaillent pas" me montre des tas de résultats qui semblent être liés à la problématique de cette icône ne s'affiche pas.

Y compris collapse.js qui est venu avec bootstrap n'a pas de résoudre ce problème.

votre bouton définit data-target=".navbar-ex1-collapse" mais vous n'avez pas ajouter cette classe à votre nav. Utilisation <nav class="collapse navbar-collapse navbar-ex1-collapse" role="navigation"> et votre code sera beau travail
Wow... merci! Pour être honnête, j'ai été en utilisant bootstrap sans savoir ce que ces données-bascule et des trucs comme ça en réalité. S'il vous plaît ajouter votre commentaire en réponse, je vais l'accepter. 🙂

OriginalL'auteur Forbidden Overseer | 2013-09-24