引導程序下拉錯誤地突出顯示

在下面的圖像中，如果您查看箭頭指向的位置，您可以看到導航欄的一個非常小的一條，在打開下拉列表時不會「突出顯示」。我從來沒有見過這個，也不知道是什麼原因造成的，如果有人能夠解釋爲什麼會發生這種情況，那會是太棒了。這是一個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 { 
    margin-bottom: 0; 
    height: 70px; 
} 
.navbar-default { 
    background-color: #383838; 
    border-color: #383838; 
} 
/* title */ 
.navbar-default .navbar-brand { 
    color: #777; 
} 
.navbar-default .navbar-brand:hover, 
.navbar-default .navbar-brand:focus { 
    color: #5E5E5E; 
} 
/* link */ 
.navbar-default .navbar-nav > li > a { 
    color: #8D8D8D; 
    font-family: Open Sans; 
    font-size: 14px; 
} 
.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-nav > li > a:focus { 
    color: #8D8D8D; 
} 
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus { 
    color: #6C6C6C; 
} 
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus { 
    color: #6C6C6C; 
    background-color: #2E2E2E; 
} 

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

.navbar-user { 
    padding: 0; 
    margin: 0; 
    display: inline-block; 
    padding-top:7px; 
} 

.navbar-steam { 
    position: relative; 
    float: right; 
    top: 8.6px; 
    margin-right: 8px; 
} 

.navbar-nav > li > a { 
    padding-top: 15px; 
    padding-bottom: 25px; 
}

來源

2016-07-22 Nhabbott

JSFiddle不顯示您的屏幕截圖顯示的內容。編輯：我在錯誤的屏幕尺寸，道歉。 – Toby

這裏有一個更新的小提琴：

https://jsfiddle.net/tobyl/Laaej9ya/

我所做的唯一的變化是：

.navbar { 
    margin-bottom: 0; 
    height: 68px; 
}

的.navbar高度和控制下拉菜單的位置元素的高度略有不同。

來源

2016-07-22 23:12:00 Toby

只要給.dropdown-toggle導航欄的高度，所以要根據你的代碼，你應該增加：

.dropdown-toggle { 
    height: 70px; /*cause 70px is the height of the navbar*/ 
}

來源

2016-07-22 23:10:51

引導程序下拉錯誤地突出顯示

回答

相關問題