Bootstrap 4 Navbar Drop-Down-Menü Element nicht klickbar auf mobile Geräte

Question

Ich habe eine Website mit Bootstrap 4 entwickelt. Wenn Sie von einem mobilen Gerät aus angezeigt und die Menüelemente auf die 3 Balken reduziert haben, sind die Menüpunkte nicht anklickbar. Ich habe versucht, es so zu implementieren, wie es die Bootstrap-Dokumente vorschlagen, aber es funktioniert immer noch nicht. Ich habe einige andere Verbesserungen vergeblich versucht.

Was mache ich hier falsch (außer mit der Alpha-Version)?

Hier ist der Ort, an dem Sie es testen können: http://www.wrestlestat.com

Denken Sie daran, wenn Sie nur Ihren Browser von einem Desktop auf das mobile Größe die Größe, alles funktioniert, es funktioniert nicht nur, wenn sie von einem Betrachtungs Mobilgerät.

Hier ist der Code für die Navigationsmenüs:

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

Hier ist ein bootply, aber wahrscheinlich viel Gutes nicht tun, da es auf einem mobilen Gerät sein muss, um nicht zu arbeiten.

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

Answer 1

Ich fand heraus, dass diese mit Bootstrap KEIN Fehler war 4. Es war ein Fehler, wie ich mein Dropdown-Ankerelement wurde konfigurieren. Hier ist die korrigierte Version:

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

Die Unterschiede sind:

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

Diese 5 Dinge behoben mein Problem.