Bootstrap Navbar重叠Google放置自动填充下拉列表

Question

我有一个Navbar，我正在尝试添加一个地方搜索框。除了谷歌地方提示框的一小部分被导航栏重叠（如下图所示）外，一切都近乎有效。

我尝试将输入框的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。

Bootstrap的navbars z-index为1000，navbar-fixed-top为1030.

自动完成z-index也是1000，因此您必须增加它。

Answer 2

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

是一个很棒的资源，可让您更改css中的自动完成元素样式

Answer 3

制作google class pac-container，其z-index大于导航栏。

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