Navbarの折りたたみアイコンが非常に小さい画面でのみ応答しません

Question

画面の右上隅にある「ハンバーガー」を持つ私のbootstrap-4 navbarは、ブートストラップの例の1つに基づいています。 崩壊し、クリック可能なアイコン、画面が非常に小さい（すなわち電話サイズ）になるまでの両方が、正常に動作し、それが応答を停止...

観察：それは働いて、メニューを停止する直前に

1. アイコンの横にあるアイコンをクリックしても表示されるので、画面が小さくなるにつれてアイコンの上を滑っている要素があるようです。ナビゲーションバーの外にいくつかの要素ではないようですので、
2. 私はnavbar-toggler-right、左上隅にあるアイコンの移動を削除し、すべてが正常に動作します...
3. 同じ動作は、すべてのページに発生します。 ...

   ナビゲーションバー<button>作品上のz = 999を設定するが、それは非常にきれいではありません

：

<nav> 
<div class="navbar navbar-toggleable-sm transparent navbar-inverse fixed-top" style="position: absolute!important;"> 
    <button type="button" class="navbar-toggler navbar-toggler-right collapsed" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 

    <div class="container"> 
    <!-- Brand --> 
    <a class="navbar-brand" href="/"> 
     <img src="{{ asset('logo-white.png') }}" width="35" height="35" alt=""> 
    </a> 

    <div class="navbar-collapse collapse" id="navbar"> 
     <ul class="navbar-nav mr-auto"> 
     <li class="nav-item"> 
      <a class="nav-link" href="/">Home</a> 
     </li> 
     <li class="nav-item"> 
      etc ... 
     </li> 
    </ul> 

    <!-- Right side (author) --> 
    <ul class="navbar-nav ml-auto"> 
    <!-- Authentication Links --> 
    @if (Auth::guest()) 
     <li class="nav-item"> 
     <a href="{{ route('login') }}" class="nav-link">Inloggen</a> 
     </li> 

     <li class="nav-item"> 
     <a href="{{ route('register') }}" class="nav-link">Registreren</a> 
     </li> 

    @else 
     <li class="nav-item"> 
     <a href="{{ url('/authors') }}/{{ Auth::id() }}" class="nav-link"> 
      <span class="fa fa-user" style="font-size: 20px;"></span> 
     </a> 
     </li> 

     <li class="nav-item"> 
     <a href="{{ route('logout') }}" class="nav-link" 
      onclick="event.preventDefault(); 
        document.getElementById('logout-form').submit();"> 
      <span class="fa fa-sign-out" style="font-size: 20px;"> 

      </span> 
      </a> 

      <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;"> 
       {{ csrf_field() }} 
      </form> 
      </li> 
       @endif 
      </div> 
      </div> 
     </li> 
     </ul> 
    </div> 
    </div> 
</div> 
</nav> 

をすべてのヘルプは大歓迎です！

Answer 1

私はBootstrapのアルファ版を使用していると推測しています。最近安定しているはずのreleased the betaです。

最新のバージョンでは、navbar-toggleable-*をnavbar-expand-*に置き換えました。彼らもnavbar-toggler-rightを削除したようです。デフォルトでは右側に表示されます。