CSS - 製作algolia下拉菜單，結果遍佈引導程序導航欄的下拉菜單

Question

我有一個帶有搜索表單的導航欄，我從Algolia的自動完成解決方案中獲得結果。這是導航欄：

<nav class="navbar" role="navigation"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
     <div id="nav-icon1" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
      <span></span> 
      <span></span> 
      <span></span> 
     </div> 
     <a href="{{ url('/') }}"> 
      <img class="logo logo-small" src="{{ asset('/img/logo-small.png') }}" alt="logo"> 
      <img class="logo logo-big" src="{{ asset('/img/m2.png') }}" alt="logo"> 
     </a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <form action="/search" method="get" class="navbar-form navbar-search-form active" role="search"> 
      <div class="form-group"> 
      <div class="input-group"> 
       <span class="input-group-addon"> 
       <button type="submit"><i class="ion-ios-search-strong"></i></button> 
       </span> 
       <input type="text" id="search-input" name="q" class="form-control" placeholder="Search for videos or players..." value="{{ Request::get('q') }}" autofocus> 
      </div> 
      </div> 
     </form> 

     <ul class="nav navbar-nav navbar-right"> 
      <li> 
      <a href="{{ url('/login') }}" class="btn btn-primary">Sign in</a> 
      </li> 
     </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
    </nav> 

在小屏幕上我有一個問題，那結果是導航欄下拉菜單

在哪裏，我想他們去了下拉菜單內。我曾嘗試與設置的z-index爲algolia下拉的各種元素：

.algolia-autocomplete { 
    z-index: 999999 !important; 
} 

但沒有工作，不知道在那裏正是我應該改變z-index的，因爲在自動完成創建的元素，以便在輸入內容之前，我無法看到結構。我該如何解決這個問題？

Answer 1

的問題是在引導類：

.navbar-collapse.in { 
    overflow-y: auto; 
} 

我不得不將其更改爲overflow-y: visible;，然後它的工作。