Bootstrap 4 导航栏下拉菜单项在移动设备上不可点击 [英] Bootstrap 4 navbar dropdown menu item not clickable on mobile devices

查看：18
本文介绍了Bootstrap 4 导航栏下拉菜单项在移动设备上不可点击的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个正在使用 Bootstrap 4 开发的网站.从移动设备查看时，菜单项已折叠到 3 个栏，菜单项不可点击.我已经尝试按照引导程序文档建议的方式实现它，但它仍然无法正常工作.我已经尝试了一些其他调整无济于事.

我在这里做错了什么(除了使用 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">☰<a href="/" class="navbar-brand"><img alt="WrestleStat" src="/images/WrestleStat.png" height="35" asp-append-version="true"/></a>

<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 class="nav-item hidden-sm-up"><a class="nav-link donate" type="button">Donate</a><li class="nav-item"><a href="/team/select" class="nav-link" type="button">Teams</a><li class="nav-item btn-group"><a class="dropdown-toggle nav-link" type="button" id="dropdown1" data-toggle="dropdown">Fantasy</a><div class="下拉菜单背景-黑色"><a href="#" class="dropdown-item">Pick'Em</a><!--/幻想/本周--><a href="#" class="dropdown-item">Tourney Pool</a><!--/tourneypool/main-->

<li class="nav-item btn-group"><a class="dropdown-toggle nav-link" type="button" id="dropdown2" data-toggle="dropdown">比较</a><div class="下拉菜单背景-黑色"><a href="/compare/dual" class="dropdown-item">双阵容</a><a href="/compare/wrestler" class="dropdown-item">Wrestlers</a>

<li class="nav-item btn-group"><a class="dropdown-toggle nav-link" type="button" id="dropdown3" data-toggle="dropdown">排名</a><div class="下拉菜单背景-黑色"><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">双人组</a><a href="/rankings/tournament" class="dropdown-item">锦标赛团队</a><div class="dropdown-divider hidden-xs-down"></div><a href="#" class="dropdown-item">统计</a>

<li class="nav-item btn-group"><a class="dropdown-toggle nav-link" type="button" id="dropdown4" data-toggle="dropdown">个人资料</a><div class="下拉菜单背景-黑色"><a href="/account/login" class="dropdown-item">登录</a><a href="/account/register" class="dropdown-item">注册</a><a href="/account/forgotpassword" class="dropdown-item">忘记密码</a>

</nav>

这是一个 bootply，但可能没有多大用处，因为它必须在移动设备上才能运行.

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

解决方案

我发现这不是 Bootstrap 4 的错误.这是我配置下拉锚元素的方式中的一个缺陷.这是更正后的版本:

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

区别在于:

  1. 删除了type="button"
  2. 添加了href="#"
  3. 添加了role="button"
  4. 添加了aria-haspopup="true"
  5. 添加了aria-expanded="false"

这 5 件事解决了我的问题.

I've got a website being developed with Bootstrap 4. When viewing from a mobile device and the menu items have collapsed to the 3 bars, the menu items are not clickable. I've tried implementing it the way the bootstrap docs suggest, but it's still not working. I've tried some other tweaks to no avail.

What am I doing wrong here (other than using the alpha version)?

Here's the site where you can test it: http://www.wrestlestat.com

Keep in mind, if you just resize your browser from a desktop to the mobile size, everything works fine, it only doesn't work when viewing from a mobile device.

Here's the code for the navigation menus:

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

Here's a bootply, but probably doesn't do much good since it must be on a mobile device to not work.

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

解决方案

I found out that this was NOT a bug with Bootstrap 4. It was a flaw in how I was configuring my dropdown anchor element. Here's the corrected version:

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

The differences are:

  1. Removed type="button"
  2. Added href="#"
  3. Added role="button"
  4. Added aria-haspopup="true"
  5. Added aria-expanded="false"

Those 5 things fixed my problem.

这篇关于Bootstrap 4 导航栏下拉菜单项在移动设备上不可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆