我正在使用Bootstrap 4开发一个网站。当在移动设备上查看且菜单项已折叠为三个条形图标时,菜单项无法点击。我尝试按照Bootstrap文档建议的方式实现,但仍然无法正常工作。我尝试了一些其他调整,但都没有用。
除了使用alpha版本之外,我还做错了什么?
这是一个可以测试的网站链接:http://www.wrestlestat.com 请注意,如果您只是将浏览器从桌面大小调整为移动大小,则一切正常,仅在从移动设备查看时无法正常工作。
以下是导航菜单的代码:
除了使用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,但可能没有什么用,因为它必须在移动设备上才能不起作用。
navbar
正确处理dropdown
菜单相关的问题。简而言之,它听起来像是4(这是一个不适合实时网站的alpha版本)尚未支持此组合。 - Robert