Barre de navigation déroulant ne fonctionne pas sur les appareils mobiles
J'ai couru dans un problème avec la barre de navigation dans le Bootstrap 3. L'un de mes éléments de menu est un menu déroulant, qui fonctionne très bien sur mon ordinateur portable, mais ne fonctionne pas sur mon téléphone android. Plus précisément, rien ne se passe lorsque vous appuyez sur la liste déroulante dans le menu de mon téléphone.
J'ai cherché sur google, ce site, et plusieurs autres pour trouver une solution, mais n'en ai pas trouvé. Il semble y avoir quelques solutions/solutions de contournement pour Bootstrap 2, mais aucun d'eux ne semble fonctionner pour moi. Je sais qu'il existe quelques différences entre la version 2 et 3, qui peut être pourquoi aucune des solutions que j'ai essayé de travaillé.
Des suggestions ou des références, je peux regarder serait grandement apprécié! Je suis, y compris le code de mon navbar.php le fichier ci-dessous. Pour donner une idée de mon installation, j'ai un header.php et footer.php les fichiers ainsi. Chacune des pages de mon site inclure l'en-tête, la barre de navigation et le pied de page des fichiers. S'il vous plaît laissez-moi savoir si des informations supplémentaires peuvent être utiles.
<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>
OriginalL'auteur AmyW | 2014-09-09
Vous devez vous connecter pour publier un commentaire.
J'ai eu le même problème avec Bootstrap 3.2.0 et la dropdown-menu sur les téléphones mobiles.
Résolu mon problème en ajoutant ceci à mon css-fichier:
Peut-être que ça aide.
J'ai eu la solution à partir de ce comparable problème avec BS 2.3.2
Edit: Et je n'utilise pas le
data-target=""
dans mon menu.Parfait...cela a fonctionné pour moi aussi. Juste une modification mineure dans votre css, vous utilisez le mauvais accolade pour fermer la déclaration css.
merci pour votre astuce.
Essayé beaucoup de choses folles et heureux de trouver ce.. c'était la solution pour moi
Merci!
OriginalL'auteur btemperli
Bien, j'ai compris la question...ou, plutôt, un travail autour de. Au lieu d'utiliser "nav-pills" dans la classe pour la liste non ordonnée de la balise, j'ai utilisé "navbar-nav'. Il change le style de la barre de navigation, mais au moins il travaille maintenant sur mon téléphone mobile. Voici le code...
OriginalL'auteur AmyW
Je suis en train de travailler avec bootstrap 1.1 modèle.
Je reçois des fix à partir de bootstrap git-hub forum, et sa fonctionne pour moi.
Vous devez ajouter une ligne de code dans la balise de script sur le document prêt :
$('body').('évènements touchstart.déroulant', '.dropdown-menu', function (e) { e.stopPropagation(); });
Essayer ce, bonne chance.
Merci.
OriginalL'auteur Jigar Trivedi