Question

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

我已经搜索了谷歌，这个网站和其他几个人的解决方案，但还没找到。 Bootstrap 2似乎有一些解决方案/解决方法，但它们似乎都不适用于我。我知道版本2和版本3之间存在一些差异，这可能就是为什么我尝试的解决方案都没有工作的原因。

我非常感谢您能看到的任何建议或参考！我在下面的navbar.php文件中包含了代码。为了了解我的设置，我还有一个header.php和footer.php文件。我网站上的每个页面都包含标题，导航栏和页脚文件。如果有任何其他信息可能有帮助，请与我们联系。

    <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

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

将此问题添加到我的css文件中解决了我的问题：

.dropdown-backdrop {
    position: static;
}

也许有帮助。我从this comparable problem with BS 2.3.2

获得了解决方案

编辑：我不在菜单中使用data-target=""。

Answer 2

嗯，我有点想出了这个问题......或者更确切地说是一个解决方法。而不是使用＆＃39; nav-pills＆＃39;在无序列表标记的类中，我使用了＆＃39; navbar-nav＆＃39;。它改变了导航栏的风格，但至少现在可以在我的手机上使用了。这是代码......

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

我正在使用 bootstrap 1.1模板。我从bootstrap git-hub论坛得到修复，它为我工作。

您需要在文档准备好的脚本标记中添加一行代码：

$（＆＃39; body＆＃39;）。on（＆＃39; touchstart.dropdown＆＃39;，＆＃39;。dropdown-menu＆＃39;，function（e）{e。 stopPropagation（）;}）;

试试这个，祝你好运。感谢。

Navbar下拉列表无法在移动设备上运行

3 个答案: