Pulsante di attivazione/disattivazione del pulsante non funziona nella barra di navigazione Bootstrap

Il pulsante di attivazione/disattivazione non funziona quando la barra di navigazione si interrompe. Ho controllato l'obiettivo dei dati più volte e sembra ok.Pulsante di attivazione/disattivazione del pulsante non funziona nella barra di navigazione Bootstrap

Ecco il mio codice:

<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>

Qualcuno sa qual è il problema e come posso risolvere il problema?

fonte

2014-11-06 James Howley

Grazie mille, funziona ora. Penso che i miei collegamenti jquery non fossero corretti. Mancava anche un tag div di chiusura dopo il mio elemento 'a class'. –

Ovviamente il pulsante di commutazione varia in base alla risoluzione dello schermo. Prova qualcosa sulla falsariga di:

<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>

Prova questo sul tuo cellulare e vedere. Successivamente vai nel tuo file css e imposta le proprietà per le dimensioni dello schermo su QUANDO dovrebbe apparire il pulsante di attivazione. Il pulsante di attivazione/disattivazione potrebbe non essere visualizzato sul desktop finché non si cambiano queste proprietà o ridimensionare la finestra del browser più piccola e più piccola finché non viene visualizzato il pulsante di attivazione/disattivazione.

Es. Massimizzato sulla mia finestra del browser, il pulsante di commutazione non viene visualizzato. Toggle bar not shown Tuttavia, se si ridimensiona la finestra del browser per la metà (o se si sta navigando su un telefono), sarà simile a questa When on mobile or a reduced browser size

Per risolvere questo problema è necessario andare nei settings del vostro CSS. Ma questo è SOLO se vuoi cambiarlo. Altrimenti funzionerà bene.

fonte

2014-11-06 01:21:56

Grazie mille, funziona ora. Penso che i miei collegamenti jquery non fossero corretti. Mancava anche un tag div di chiusura dopo il mio elemento 'a class'. –

vedere che avete corretta importazione di biblioteca, ho hade uno stesso problema, io non perché a volte ha un comportamento strano con diversa versione di Jquery

Prova questa

<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>

fonte

2014-11-06 08:50:25

Grazie per il vostro aiuto su questo, penso che il mio collegamento jQuery non sia corretto –

auguro che possa aiutare perché ho avuto lo stesso problema e risolto con la presente:

<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>

fonte

2015-09-29 23:48:06

Default navbar - Requires JavaScript plugin

Se JavaScript è disabilitato e il viewport è abbastanza stretto da far crollare la barra di navigazione, sarà impossibile espandere la barra di navigazione e visualizzare il contenuto all'interno di .navbar-collapse.

La barra di navigazione sensibile richiede il plugin crollo da inserire nella versione di Bootstrap

fonte

2016-01-18 18:40:49 user4986178

Ogni volta che ci troviamo di fronte a questo problema "perché è il tasto barra di navigazione ginocchiera non funziona?", Ma questa volta abbiamo trovato la soluzione e soprattutto grazie per il team di sviluppatori di Google Chrome sviluppato per mostrare chiaramente l'errore.

Dovremmo includere il file di libreria jquery prima del file javascript di bootstrap.

fonte

2017-04-24 09:07:48 Vijay

Grazie, è stato davvero un mio problema. – mimic

Pulsante di attivazione/disattivazione del pulsante non funziona nella barra di navigazione Bootstrap

risposta

Problemi correlati