导航栏下拉菜单在移动设备上不起作用 [英] Navbar dropdown not working on mobile devices

问题描述

我在Bootstrap 3中遇到导航栏问题.我的菜单项之一是下拉菜单，该下拉菜单在笔记本电脑上可以正常工作，但在Android手机上无法正常工作.当按下手机上的下拉菜单项时，没有任何反应.

I've run into an issue with the navbar in Bootstrap 3. One of my menu items is a dropdown, which works fine on my laptop, but doesn't work on my android phone. Specifically nothing happens when pressing on the dropdown menu item on my phone.

我已经在google，该网站以及其他几个网站上搜索了解决方案，但尚未找到解决方案. Bootstrap 2似乎有一些解决方案/解决方法，但是似乎没有一个对我有用.我知道版本2和版本3之间存在一些差异，这可能就是为什么我尝试过的所有解决方案都无法奏效的原因.

I've searched google, this site, and several others for a solution, but have yet to find one. There seems to be a few solutions/workarounds for Bootstrap 2, but none of them seem to work for me. I know there are some differences between version 2 and 3, which may be why none of the solutions I tried worked.

我能看到的任何建议或参考将不胜感激！我在下面包含了我的navbar.php文件中的代码.为了给我一个设置的想法，我也有一个header.php和footer.php文件.我网站上的每个页面都包含页眉，导航栏和页脚文件.请让我知道是否还有其他信息可能有用.

Any suggestions or references I can look at would be greatly appreciated! I'm including the code from my navbar.php file below. To give an idea of my setup, I have a header.php and footer.php files as well. Each of the pages on my site include the header, navbar, and footer files. Please let me know if any additional information may be helpful.

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

推荐答案

我在Bootstrap 3.2.0和手机上的下拉菜单中也遇到了同样的问题.

I had the same problem with Bootstrap 3.2.0 and the dropdown-menu on mobile phones.

通过将其添加到我的css文件中解决了我的问题:

Solved my problem by adding this to my css-file:

.dropdown-backdrop {
    position: static;
}

也许有帮助. 我从>与BS 2.3.2相似的问题中获得了解决方案

而且我不使用菜单中的data-target="".

And i do not use the data-target="" in my menu.

这篇关于导航栏下拉菜单在移动设备上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！