html - Bootstrap导航栏顶部固定搜索输入内容随页面滚动

为了考虑在Bootsrap固定导航栏中包含的Google地图自动完成功能（顶部），我具有以下功能：

  <nav class="navbar navbar-fixed-top">
    <div class="container">
        <div class="navbar-header navbar-collapse navbar-responsive-collapse collapse">
            <a href="/" class="navbar-brand"><img src="" height="40"></a>
        </div>

        <div id="search-container" class="col-md-6 col-md-offset-1 col-sm-5 col-sm-offset-1">
            <div class="row">
                    <div class="input-group">
                        <input name="searchbar" id="searchbar" class="form-control ui-autocomplete-input" autocomplete="on" value="" placeholder="Saisissez une adresse postale ou des coordonnées GPS.">
                        <div class="input-group-addon"><a id="validation" onclick="validSearch();"><span class="glyphicon glyphicon-search"></span></a></div>
                    </div>
            </div>
        </div>

        <ul class="nav navbar-nav navbar-right hidden-xs">
            <li><a href="#" role="button"><span class="glyphicon glyphicon-bell" aria-hidden="true"></span></a></li>
            <li><a href="#" role="button">MyInfo <span class="glyphicon glyphicon-user" aria-hidden="true"></span></a>
            <li class="dropdown">
                <a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#" id="drop2">
                    <span class="glyphicon glyphicon-th-large"></span>
                </a>
                <ul id="dropdown-services" aria-labelledby="drop2" class="dropdown-menu">
                </ul>
            </li>
        </ul>
    </div>
</nav>

和CSS：

#search-container {
    padding-top:9px;
}

.pac-container {
    z-index: 9999 !important;
}

问题在于，自动完成内容列表随页面滚动而移动...如何确定自动完成内容列表的位置（.pac-container Google Maps CSS类）？

这是我的问题的Codepen版本：http://codepen.io/anon/pen/JYezWW

最佳答案

由于您使用的导航栏是固定的，因此可以将以下内容添加到样式表中，以覆盖从Google获取的默认样式：

.pac-container {
   position: fixed!important;
   top: 43px!important; /* This is the #search-container height + the padding top */
}

关于html - Bootstrap导航栏顶部固定搜索输入内容随页面滚动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33659070/