引導下拉式樣下拉式樣怪異

Question

下面是一張圖片，顯示當我點擊引導式下拉時會發生什麼。我不知道爲什麼bootstrap不會使底部的小區域變暗，也許是我的CSS圖像，但我非常懷疑它。在圖片下方，您可以找到圖片的導航欄代碼& CSS。這是一個JSFiddle。

導航欄代碼

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 

     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right"> 
       @if(!Auth::check()) 
        <li><a href="login"><img class="navbar-avatar" src="{{ asset('src/img/login_steam.png') }}"></a></li> 
       @else 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span>{{ Auth::user()->username }}</span><img class="navbar-avatar" src="{{ Auth::user()->avatar }}"></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Dashboard</a></li> 
          <li><a href="#">Settings</a></li> 
          <li><a href="#">Logout</a></li> 
         </ul> 
        </li> 
       @endif 
      </ul> 
     </div> 
    </div> 
</nav> 

阿凡達CSS

.navbar-avatar { 
width: 45px; 
height: 45px; 
position: relative; 
float: right; 
top: -10px; 
margin-left: 8px; 
} 

Answer 1

你只需要下拉鍊接的填充按需要調整

​​

Jsfiddle