Question

我有一个使用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，但可能没什么好处，因为它必须在移动设备上才能工作。

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

Answer 1

我发现这不是Bootstrap 4的错误。这是我如何配置我的下拉锚元素的一个缺陷。这是更正后的版本：

<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"

这五件事解决了我的问题。

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

1 个答案: