固定导航栏中的引导下拉列表在平板电脑上没有反应



很抱歉打扰你们,但是较旧的帖子(例如 Bootstrap 4 导航栏下拉菜单项在移动设备上不可点击(在这里不能为我做这项工作。该特定线程中的给定提示已经在我的代码中实现(见下文(。

我创建了一个带有下拉菜单的固定导航栏。在桌面浏览器以及Android手机上的移动浏览器上,一切都很棒,但是当涉及到平板电脑(也是Android(时,汉堡菜单会展开,但没有打开任何这些下拉菜单。意思是:我可以单击汉堡菜单,它会打开,但下拉菜单保持非活动状态,并且在单击时不会展开。

您可以尝试通过减小浏览器的大小来复制错误,但这不会重现错误(因为在桌面和移动设备上一切都很好(。另外:当我水平使用平板电脑时,没有达到汉堡菜单显示的临界点。然后,奇怪的是,一切都很好,我可以浏览所有下拉菜单。 我在这里一无所知,喜欢向您展示相关代码。

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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://www.xxx.de">
<span class="brandicon icon-target"></span>
<span class="brandname">Brandname</span>
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle nav-link" href="#" role="button" id="navbarDropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="btnicon icon-action-undo"></span>Früher<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="link01.html">Antike</a></li>
<li><a href="link02.html">Mittelalter</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle nav-link" href="#" role="button" id="navbarDropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="btnicon icon-frame"></span>Heute<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="otherlink1.html">Some name</a></li>
<li><a href="otherlink2.html">Rechtslage</a></li>
</ul>
</li>               
<li class="dropdown">
<a class="dropdown-toggle nav-link" href="#" role="button" id="navbarDropdown3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="btnicon icon-direction"></span>Another text<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="linkage1.html">Header1</a></li>
<li><a href="linkage2.html">Header2</a></li>
</ul>
</li>                                       

</div>
</div>
</nav>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

我不会引导,到目前为止,我在这里没有丝毫暗示我错过了什么。所有的帮助将不胜感激。谢谢!

一切都很好 - 很抱歉打扰了。我实际上能够在桌面浏览器上重现错误,我的 CSS 搞砸了。有一些溢出问题,我可以消除,但改变了我的断点。

最新更新