web-dev-qa-db-fra.com

L'effondrement du bouton bascule ne fonctionne pas dans Bootstrap navbar

Mon bouton bascule ne fonctionne pas lorsque la barre de navigation s'effondre. J'ai vérifié la cible de données à plusieurs reprises et semble correct.

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-il quel est le problème et comment le résoudre?

twitter-bootstraptogglenavbarcollapse
6
James Howley

Bien sûr, votre bouton bascule sera différent en fonction de la résolution de votre écran. Essayez quelque chose comme:

    <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 voyez. Ensuite, allez dans votre fichier css et définissez les propriétés de la taille de l'écran sur QUAND le bouton bascule devrait-il apparaître. Le bouton bascule peut ne pas apparaître sur le bureau jusqu'à ce que vous modifiiez ces propriétés ou redimensionniez la fenêtre de votre navigateur de plus en plus petite jusqu'à ce que le bouton bascule apparaisse.

Par exemple. Agrandi dans la fenêtre de mon navigateur, le bouton bascule n'apparaît pas. Toggle bar not shown Cependant, si vous redimensionnez la fenêtre de votre navigateur de moitié (ou si vous surfez sur un téléphone), cela ressemblera à ceci When on mobile or a reduced browser size

Pour résoudre ce problème, vous devrez accéder à vos paramètres CSS. Mais c'est UNIQUEMENT si vous voulez le changer. Sinon ça marchera bien.

5
Prasanth Louis

Vérifiez que vous avez correctement importé la bibliothèque, j'ai eu le même problème, je ne sais pas pourquoi parfois il a un comportement étrange avec une version différente de Jquery

Essaye ça

<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>
3
Miomir Dancevic

Chaque fois que nous sommes confrontés à ce problème "pourquoi le bouton de bascule de la barre de navigation ne fonctionne-t-il pas?", Mais cette fois-ci, nous avons trouvé la solution et spécialement merci pour google chrome pour le développeur a clairement montré l'erreur).

Nous devons inclure le fichier de bibliothèque jquery avant bootstrap fichier javascript.

1
Vijay

Navbar par défaut - Nécessite un plugin JavaScript

Si JavaScript est désactivé et que la fenêtre d'affichage est suffisamment étroite pour que la barre de navigation s'effondre, il sera impossible de développer la barre de navigation et d'afficher le contenu dans le .navbar-collapse.

La barre de navigation réactive nécessite que le plugin d'effondrement soit inclus dans votre version de Bootstrap

1
user4986178

J'espère que cela vous aidera car j'ai eu le même problème et l'ai résolu par ceci:

<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>
1
Anna Chen