logo标签列表

Bootstrap 4导航栏下拉菜单在移动设备上无法点击

jquerycsstwitter-bootstraptwitter-bootstrap-4bootstrap-4
4
我正在使用Bootstrap 4开发一个网站。当在移动设备上查看且菜单项已折叠为三个条形图标时，菜单项无法点击。我尝试按照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，但可能没有什么用，因为它必须在移动设备上才能不起作用。

http://www.bootply.com/9Z9oycwCSh

使用 Chrome 的模拟移动设备功能以及我的 Android Chrome 进行测试，未能重现问题。所有链接都正常工作。 - Polyov
@Polyov 对的，因为从桌面机器上运行时它可以正常工作。只有在从移动设备上运行时才会停止工作（我正在使用iPhone进行测试）。无论我在iPhone上运行Safari还是Chrome都没有关系。 - ganders
1
您可能希望参考 https://github.com/twbs/bootstrap/issues/17532，因为它讨论了Bootstrap 4和与navbar正确处理dropdown菜单相关的问题。简而言之，它听起来像是4（这是一个不适合实时网站的alpha版本）尚未支持此组合。 - Robert
在下一个 alpha/beta 版本修复之前有什么解决方法吗？ - ganders
1个回答
6

我发现这不是Bootstrap 4的一个bug，而是我配置下拉菜单锚点元素时的缺陷。以下是更正后的版本：

<a class="dropdown-toggle nav-link" href="#" role="button" id="dropdown3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Rankings</a>

这里的区别如下：
  1. 移除了type="button"
  2. 添加了href="#"
  3. 添加了role="button"
  4. 添加了aria-haspopup="true"
  5. 添加了aria-expanded="false"
这5个修改解决了我的问题。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接