我有一个正在使用 Bootstrap 4 开发的网站。当从移动设备查看时,菜单项已折叠成 3 个栏,菜单项不可点击。我已经尝试按照 Bootstrap 文档建议的方式实现它,但它仍然无法正常工作。我尝试了一些其他调整但无济于事。
我在这里做错了什么(除了使用 alpha 版本)?
这是您可以对其进行测试的站点:http://www.wrestlestat.com
请记住,如果您只是将浏览器从桌面大小调整为移动大小,一切正常,只是在从移动设备查看时不起作用。
这是导航菜单的代码:
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggler pull-xs-right hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsemenus">
☰
</button>
<a href="/" class="navbar-brand">
<img alt="WrestleStat" src="/images/WrestleStat.png" height="35" asp-append-version="true" />
</a>
</div>
<div id="collapsemenus" class="collapse navbar-toggleable-xs">
<ul class="nav navbar-nav">
<li class="nav-item m-l-1 hidden-xs-down">
<a class="nav-link donate" type="button">Donate</a>
</li>
<li class="nav-item hidden-sm-up">
<a class="nav-link donate" type="button">Donate</a>
</li>
<li class="nav-item">
<a href="/team/select" class="nav-link" type="button">Teams</a>
</li>
<li class="nav-item btn-group">
<a class="dropdown-toggle nav-link" type="button" id="dropdown1" data-toggle="dropdown">Fantasy</a>
<div class="dropdown-menu background-black">
<a href="#" class="dropdown-item">Pick'Em</a>
<!--/fantasy/thisweek-->
<a href="#" class="dropdown-item">Tourney Pool</a>
<!--/tourneypool/main-->
</div>
</li>
<li class="nav-item btn-group">
<a class="dropdown-toggle nav-link" type="button" id="dropdown2" data-toggle="dropdown">Compare</a>
<div class="dropdown-menu background-black">
<a href="/compare/dual" class="dropdown-item">Dual Lineup</a>
<a href="/compare/wrestler" class="dropdown-item">Wrestlers</a>
</div>
</li>
<li class="nav-item btn-group">
<a class="dropdown-toggle nav-link" type="button" id="dropdown3" data-toggle="dropdown">Rankings</a>
<div class="dropdown-menu background-black">
<a href="/rankings/wrestler" class="dropdown-item">Wrestlers</a>
<a href="/rankings/weight/125" class="dropdown-item p-l-3 hidden-sm-down">125</a>
<a href="/rankings/weight/133" class="dropdown-item p-l-3 hidden-sm-down">133</a>
<a href="/rankings/weight/141" class="dropdown-item p-l-3 hidden-sm-down">141</a>
<a href="/rankings/weight/149" class="dropdown-item p-l-3 hidden-sm-down">149</a>
<a href="/rankings/weight/157" class="dropdown-item p-l-3 hidden-sm-down">157</a>
<a href="/rankings/weight/165" class="dropdown-item p-l-3 hidden-sm-down">165</a>
<a href="/rankings/weight/174" class="dropdown-item p-l-3 hidden-sm-down">174</a>
<a href="/rankings/weight/184" class="dropdown-item p-l-3 hidden-sm-down">184</a>
<a href="/rankings/weight/197" class="dropdown-item p-l-3 hidden-sm-down">197</a>
<a href="/rankings/weight/285" class="dropdown-item p-l-3 hidden-sm-down">285</a>
<div class="dropdown-divider hidden-xs-down"></div>
<a href="/rankings/dual" class="dropdown-item">Dual Team</a>
<a href="/rankings/tournament" class="dropdown-item">Tournament Team</a>
<div class="dropdown-divider hidden-xs-down"></div>
<a href="#" class="dropdown-item">Statistical</a>
</div>
</li>
<li class="nav-item btn-group">
<a class="dropdown-toggle nav-link" type="button" id="dropdown4" data-toggle="dropdown">Profile</a>
<div class="dropdown-menu background-black">
<a href="/account/login" class="dropdown-item">Login</a>
<a href="/account/register" class="dropdown-item">Register</a>
<a href="/account/forgotpassword" class="dropdown-item">Forgot Password</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
这是一个 bootply,但可能没什么用,因为它必须在移动设备上才能工作。
最佳答案
我发现这不是 Bootstrap 4 的错误。这是我配置下拉 anchor 元素的方式中的一个缺陷。这是更正后的版本:
<a class="dropdown-toggle nav-link" href="#" role="button" id="dropdown3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Rankings</a>
区别是:
- 删除了
type="button"
- 添加了
href="#"
- 添加了
role="button"
- 添加了
aria-haspopup="true"
- 添加了
aria-expanded="false"
这 5 件事解决了我的问题。
关于jquery - Bootstrap 4 导航栏下拉菜单项在移动设备上不可点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38510524/