Bootstrap Navbar与Google重叠放置自动填充下拉菜单 [英] Bootstrap Navbar overlapping Google places autocomplete dropdown

问题描述

我有一个导航栏，我要在其上添加地方搜索框。一切都几乎工作，除了一小部分的google地方提示框被导航栏重叠（如下图所示）。

I have a Navbar on which I am trying to add a places search box. Everything almost works except that a small part of the google places hint box is being overlapped by the navbar (as shown in the image below).

我已尝试更改 z-index 为10或2000或90000，但它似乎没有效果。

I have tried to change the z-index of the input box to 10 or 2000 or 90000 but it does not seem to have an effect.

有没有其他需要做的，我缺少？

Is there something else that needs to be done that I am missing?

这里是html： / p>

Here is the 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>

推荐答案

更改自动完成z-index或移动 pac-container down。

Change the autocomplete z-index or move the pac-container down.

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

Bootstrap's navbars z-index is 1000, navbar-fixed-top is 1030.

自动完成z-索引也是1000，所以你必须增加它。

The Autocomplete z-index is also 1000 so you'll have to increase it.

这篇关于Bootstrap Navbar与Google重叠放置自动填充下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！