Bootstrap Navbar重疊Google地方自動完成下拉列表

Question

我有一個導航欄，我試圖添加地方搜索框。除了谷歌地方提示框的一小部分被導航欄重疊（如下圖所示）之外，所有東西幾乎都可以工作。

我曾嘗試輸入框的z-index更改爲10或2000或90000，但它似乎並沒有產生效果。

還有什麼需要做的，我失蹤了？

下面是HTML：

<form class="navbar-form" role="search"> 
    <div class="col-sm-2"> 
    <div class="form-group has-feedback no-margin"> 
     <input aria-label="Place" type="text" class="form-control text-center" id="searchPlace" placeholder="Place" style="z-index:90000"> 
     <i class="map-pin-icon form-control-feedback"></i> 
    </div>  
    </div> 
</form> 

Answer 1

更改自動完成的z-index或移動pac-container下來。

引導的導航欄的z-index是1000，導航欄固定頂是1030

自動填充的z-index也是1000，所以你必須增加它。

Answer 2

https://google-developers.appspot.com/maps/documentation/javascript/places-autocomplete#style_autocomplete

是一個很好的資源，讓您更改CSS

Answer 3

自動完成元素的樣式讓谷歌類pac-container用z-index比導航欄更大。

.pac-container{ 
z-index: 8000; 
}