Le bouton à bascule effondrement ne fonctionne pas dans le Bootstrap barre de navigation

Mon bouton à bascule n'est pas opérationnelle lorsque la barre de navigation s'effondre. J'ai vérifié les données de la cible à plusieurs reprises et semble ok.

Voici mon code:

<div class="navbar navbar-fixed-top navbar-inverse">
 <div class="container">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="index.html" title="The Title">
    <img style="max-width:100px;" src="images/LOGO-4.png">
  </a>


    <div class="collapse navbar-collapse navbar-collapse">
        <ul class="nav navbar-nav pull-right">
            <li class="active"><a href="#">WORK</a></li>
            <li><a href="#">CONTACT</a></li>

        </ul>
    </div>

Quelqu'un sait quel est le problème et comment je peux résoudre ce problème?

Merci beaucoup, c'est de travailler maintenant. Je pense que mon jquery liens n'étaient pas correctes. Avait disparu, une fermeture de balise div après mon 'de la classe de l'élément.

InformationsquelleAutor James Howley | 2014-11-06

Bien sûr, votre bouton à bascule va varier en fonction de la résolution de votre écran. Essayez quelque chose le long des lignes de:

    <html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">


     </head>
<body >

<nav class="navbar navbar-inverse">
<div class="container-fluid">

 <div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="index.html" title="The Title">
    <img style="max-width:100px;" src="images/LOGO-4.png">
  </a>
</div>

    <div class="collapse navbar-collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav pull-right">
            <li class="active"><a href="#">WORK</a></li>
            <li><a href="#">CONTACT</a></li>

        </ul>
    </div>
    </div>
    </nav>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    </body>
</html>

Essayez ceci sur votre mobile et de voir. Ensuite, allez dans votre fichier css et définissez les propriétés de la taille de l'écran sur QUAND dois le bouton à bascule semblent être.
Le bouton à bascule peuvent ne pas apparaître sur le bureau jusqu'à la modification de ces propriétés, ou redimensionner la fenêtre de votre navigateur plus petits, et les plus petits jusqu'à ce que le bouton de basculement s'affiche.

Par exemple. Agrandie sur ma fenêtre de navigateur, le bouton de basculement ne s'affiche pas.
Le bouton à bascule effondrement ne fonctionne pas dans le Bootstrap barre de navigation
Toutefois, si vous redimensionnez la fenêtre de votre navigateur par moitié(ou si vous surfez sur un téléphone), ça va ressembler à ceci

Pour corriger cela, vous devez aller dans votre css paramètres. Mais ce n'est que si vous voulez le modifier. Sinon ça marchera très bien.

Merci beaucoup, c'est de travailler maintenant. Je pense que mon jquery liens n'étaient pas correctes. Avait disparu, une fermeture de balise div après mon 'de la classe de l'élément.

InformationsquelleAutor Prasanth Louis

Voir que vous avez la bonne importation de la bibliothèque, j'ai un problème, je n'ai pas pourquoi, parfois, il a un comportement étrange avec les différentes version de Jquery

Essayer cette

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="./">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>

Merci pour votre aide sur ce, je pense que mon jquery lien est incorrect

InformationsquelleAutor Miomir Dancevic

Espère que ça va aider, car j'ai eu le même problème et résolu par la présente:

<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
...
</nav>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>

InformationsquelleAutor Anna Chen

1

Par défaut navbar - Nécessite l'activation de JavaScript plugin

Si JavaScript est désactivé et la fenêtre d'affichage est assez étroit que la barre de navigation s'effondre, il sera impossible d'élargir la barre de navigation et afficher le contenu à l'intérieur de l' .navbar-effondrement.

Le responsive barre de navigation nécessite l'effondrement plugin pour être inclus dans votre version de Bootstrap

InformationsquelleAutor user4986178
1

Chaque fois que nous sommes confrontés à ce problème: "pourquoi est-navbar-bouton bascule pas de travail?", mais cette fois, nous avons trouvé la solution et surtout merci pour google chrome équipe de développement pour les pays développés montre l'erreur clairement.

Nous devrions inclure la librairie jquery fichier avant de bootstrap fichier javascript.
- Merci, c'était vraiment mon problème.
InformationsquelleAutor Vijay

Vous devez vous connecter pour publier un commentaire.