twitter-bootstrap – Navbar下拉列表无法在移动设备上运行

发布时间：2020-12-18 00:23:03 所属栏目：安全来源：网络整理

导读：我在Bootstrap 3中遇到导航栏的问题.我的一个菜单项是下拉列表,它在我的笔记本电脑上工作正常,但在我的 Android手机上无效.按下手机上的下拉菜单项时没有任何反应. 我搜索了谷歌,这个网站和其他几个人的解决方案,但还没有找到一个. Bootstrap 2似乎有一些解

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

解决方法

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

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

.dropdown-backdrop {
    position: static;
}

也许它有所帮助.
我从this comparable problem with BS 2.3.2获得了解决方案

编辑：我不在菜单中使用data-target =“”.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!