Il menu a discesa della navbar non funziona sui dispositivi mobili

Question

Ho riscontrato un problema con la barra di navigazione in Bootstrap 3. Una delle voci del mio menu è un menu a discesa, che funziona correttamente sul mio laptop, ma non funziona sul mio telefono Android. In particolare, nulla accade quando si preme sulla voce del menu a discesa sul mio telefono.

Ho cercato su Google, questo sito e molti altri per una soluzione, ma devo ancora trovarne uno. Sembra che ci siano alcune soluzioni/soluzioni alternative per Bootstrap 2, ma nessuna sembra funzionare per me. So che ci sono alcune differenze tra la versione 2 e 3, che potrebbe essere il motivo per cui nessuna delle soluzioni che ho provato ha funzionato.

Qualsiasi suggerimento o riferimento che posso guardare sarebbe molto apprezzato! Sto includendo il codice dal mio file navbar.php qui sotto. Per dare un'idea del mio setup, ho anche un file header.php e footer.php. Ciascuna delle pagine del mio sito include i file header, navbar e footer. Per favore fatemi sapere se eventuali informazioni aggiuntive potrebbero essere utili.

<nav id="navbar" class="navbar navar-default navbar-inverse navbar-fixed-top" role = "naviation"> 
<div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbarCollapse"> 
      <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="http://luckyrabbitdesigns.com/index.php">Lucky Rabbit Designs</a> 
    </div> 
    <div class="collapse navbar-collapse navbarCollapse"> 
     <ul class="nav nav-pills"> 
      <li > 
       <a href="http://luckyrabbitdesigns.com/index.php">Home</a> 
      </li> 
      <!-- <li> 
       <a href="http://luckyrabbitdesigns.com/resume.php">Res</a> 
      </li>--> 
      <li class="dropdown"> 
       <a href="http://luckyrabbitdesigns.com/projects.php" data-target="#" data-toggle="dropdown" class="dropdown-toggle">Projects <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <li><a href="http://luckyrabbitdesigns.com/projects/designs.php">Designs</a></li> 
        <li><a href="http://luckyrabbitdesigns.com/projects/artwork.php">Art</a></li> 
        <li><a href="http://luckyrabbitdesigns.com/projects/bookreviews.php">Book Reviews</a></li> 
        <li><a href="http://luckyrabbitdesigns.com/projects/photos.php">Photos</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="http://luckyrabbitdesigns.com/contact.php">Contact</a> 
      </li> 
     </ul> 
    </div> 
</div> 

Answer 1

Beh, io tipo di capito il problema ... o, meglio, un work-around. Invece di usare "nav-pills" nella classe per il tag elenco non ordinato, ho usato "navbar-nav". Cambia lo stile della barra di navigazione, ma almeno ora funziona sul mio cellulare. Ecco il codice ...

<nav id="navbar" class="navbar navar-default navbar-inverse navbar-fixed-top" role = "naviation"> 
<div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" 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="http://luckyrabbitdesigns.com/index.php">Lucky Rabbit Designs</a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
      <li > 
       <a href="http://luckyrabbitdesigns.com/index.php">Home</a> 
      </li> 
      <!-- <li> 
       <a href="http://luckyrabbitdesigns.com/resume.php">Res</a> 
      </li>--> 
      <li class="dropdown"> 
       <a href="http://luckyrabbitdesigns.com/projects.php" data-toggle="dropdown" class="dropdown-toggle">Projects <span class="caret"></span></a> 
       <ul class="dropdown-menu" role="menu"> 
        <li><a href="http://luckyrabbitdesigns.com/projects/designs.php">Designs</a></li> 
        <li><a href="http://luckyrabbitdesigns.com/projects/artwork.php">Art</a></li> 
        <li><a href="http://luckyrabbitdesigns.com/projects/bookreviews.php">Book Reviews</a></li> 
        <li><a href="http://luckyrabbitdesigns.com/projects/photos.php">Photos</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="http://luckyrabbitdesigns.com/contact.php">Contact</a> 
      </li> 
     </ul> 
    </div> 
</div> 

Answer 2

Ho avuto lo stesso problema con Bootstrap 3.2.0 e la discesa menu sui telefoni cellulari.

Ha risolto il problema con l'aggiunta di questo al mio css-file:

.dropdown-backdrop { 
    position: static; 
} 

Forse aiuta. Ho ottenuto la soluzione da this comparable problem with BS 2.3.2

Modifica: E io non uso il data-target="" nel mio menu.

Answer 3

Sto lavorando con modello di bootstrap 1.1. Ho ottenuto una correzione dal forum git-hub di bootstrap e ha funzionato per me.

È necessario aggiungere una riga di codice nel tag script sul documento pronto come:.

$ ('body') il ('touchstart.dropdown', 'menu .dropdown', la funzione (e) {e.stopPropagation();});

Prova questo, Buona fortuna. Grazie.