Navbar dropdown funktioniert nicht auf mobilen Geräten

Question

Ich habe ein Problem mit der Navbar in Bootstrap 3. Eines meiner Menüpunkte ist ein Dropdown, das funktioniert gut auf meinem Laptop, funktioniert aber nicht auf meinem Android-Handy. Insbesondere passiert nichts, wenn auf den Dropdown-Menüeintrag auf meinem Telefon gedrückt wird.

Ich habe google, diese Seite und mehrere andere nach einer Lösung gesucht, aber muss noch eine finden. Es scheint ein paar Lösungen/Workarounds für Bootstrap 2 zu geben, aber keiner von ihnen scheint für mich zu funktionieren. Ich weiß, dass es zwischen Version 2 und 3 einige Unterschiede gibt, weshalb keine der Lösungen, die ich versucht habe, funktioniert hat.

Alle Vorschläge oder Referenzen, die ich betrachten kann, würden sehr geschätzt werden! Ich füge den Code aus meiner navbar.php Datei unten ein. Um eine Vorstellung von meinem Setup zu bekommen, habe ich auch eine header.php und footer.php Dateien. Jede der Seiten auf meiner Website enthält die Header-, Navigations- und Fußzeilendateien. Bitte lassen Sie mich wissen, wenn zusätzliche Informationen hilfreich sein können.

<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

Nun, ich dachte, Art der Frage heraus ... oder, besser gesagt, ein Work-around. Anstatt "nav-pills" in der Klasse für das ungeordnete Listen-Tag zu verwenden, habe ich 'Navbar-Nav' verwendet. Es ändert den Stil der Navbar, aber zumindest funktioniert es jetzt auf meinem Handy. Hier ist der Code ...

<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

ich das gleiche Problem mit Bootstrap hatte 3.2.0 und im Dropdown-Menü auf Mobiltelefone.

mein Problem gelöst, dies zu meiner CSS-Datei durch Hinzufügen:

.dropdown-backdrop { 
    position: static; 
} 

Vielleicht hilft es. Ich habe die Lösung von this comparable problem with BS 2.3.2

Edit: Und ich habe nicht die data-target="" in meinem Menü.

Answer 3

Ich arbeite mit Bootstrap 1.1 Vorlage. Ich bekomme von bootstrap git-hub-Forum reparieren, und es funktioniert für mich.

Sie benötigen eine Zeile Code in Script-Tag auf Dokument hinzufügen bereit wie:.

$ ('body') auf ('touchstart.dropdown', '.dropdown-Menü', function (e) {e.stopPropagation();});

Versuchen Sie dies, viel Glück. Danke.