jquery - Bootstrap 4 navbar dropdown menu item not clickable on mobile devices -

i've got website being developed bootstrap 4. when viewing mobile device , menu items have collapsed 3 bars, menu items not clickable. i've tried implementing way bootstrap docs suggest, it's still not working. i've tried other tweaks no avail.

what doing wrong here (other using alpha version)?

here's site can test it: http://www.wrestlestat.com

keep in mind, if resize browser desktop mobile size, works fine, doesn't work when viewing mobile device.

here's code 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 bootply, doesn't since must on mobile device not work.

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

i found out not bug bootstrap 4. flaw in how configuring dropdown anchor element. here's 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 problem.