Bootstrap 3 - 導航欄問題，當它被修復時

使用Bootstrap 3導航欄，我想在輸入文本字段中顯示Google地點選項。以下是屏幕快照一樣：Bootstrap 3 - 導航欄問題，當它被修復時

enter image description here

。從屏幕截圖可以看出，當navbar是固定的，在後面顯示的選項。而且，當navbar是靜態的時候，選項按預期顯示。我希望在固定導航欄時正確顯示選項。

我試圖指出bootply上的代碼，但它不工作。工作代碼JSFiddle。此外，代碼如下：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <title>Navbar Template for Bootstrap</title> 

    <!-- Bootstrap core CSS --> 
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> 

    <script src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script> 

    </head> 

    <body style="min-height:  2000px;"> 

    <div class="container"> 

     <!-- Static navbar --> 
     <div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Project name</a> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">Contact</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Find <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
       <li> 
        <form class="navbar-form navbar-left" role="search"> 
         <div class="form-group"> 
         <input type="text" name="search" style="width: 20em;" class="form-control" placeholder="Search"> 
         </div> 
         <button type="submit" class="btn btn-default">Submit</button> 
        </form> 
       </li> 
       </ul> 
      </li> 
      </ul> 

     </div><!--/.nav-collapse --> 
     </div> 



    </div> <!-- /container --> 


    <!-- Bootstrap core JavaScript 
    ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 
    </body> 
</html> 

<script> 

    window.onload = function() { 

     var options = { 
      types: ['geocode'] 
     }; 

     var inputField;  
     inputField = document.getElementsByName('search')[0]; 
     new google.maps.places.Autocomplete(inputField, options); 

    }; 

</script>

請幫忙。

非常感謝！

來源

2013-12-17 San

這是因爲你的元素的z-index。嘗試更改.pac-container的z-index。例如：.pac-container {z-index：9999; }。

來源

2013-12-17 13:28:24 Nishant

我想z-index對於所有類型的導航條都很常見。兩個輸出之間唯一的變化是class，一個是'navbar-fixed-top'，另一個是'navbar-static-top'。感謝您指出JSFiddle，它的代碼@ http://jsfiddle.net/sannidhi/WLQjp/。 – San

試圖編輯小提琴，它正是我所說的:)增加pac-container的z-index'.pac-container {z-index：9999;}'試試這個。 – Nishant

很酷，很有效！但是，請幫助我瞭解什麼是pac-container，因爲我沒有在兩個引導文件中找到它。 – San

Bootstrap 3 - 導航欄問題，當它被修復時

回答

相關問題