如何讓TwitterBootstrap的導航欄固定在屏幕上方，以便垂直頁面佈局很長的應用程序？

Question

我從http://www.initializr.com/ 下載了引導程序模板我的問題是，如何向下滾動到我的網頁頁腳時，如何將導航欄固定在屏幕頂部？爲了更好地瞭解我想要實現的目標，我做了一個截圖。

例如：在移動設備的角度導航欄是固定

例如：當我向下滾動到我想要的導航條留固定在頂部的頁面的頁腳屏幕。正如你所看到的，NAVBAR無法在屏幕上保持固定。

CODE：

<div class="navbar navbar-fixed-top"> 
      <div class="navbar-inner"> 
       <div class="container"> 
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> 
        <a class="brand" href="#"><img src="img/pldttranssmall.png"></a> 
        <div class="nav-collapse collapse"> 
         <ul class="nav"> 
          <li class="active"> 
           <a href="#">Home</a> 
          </li> 
          <li> 
           <a href="#about">About</a> 
          </li> 
          <li> 
           <a href="#product">Product and Services</a> 
          </li> 
          <li> 
           <a href="#investor">Investor Relations</a> 
          </li> 
          <li> 
           <a href="#support">Get Support</a> 
          </li> 
         </ul> 
         <form class="navbar-form pull-right"> 
          <input class="span2" type="text" placeholder="Search"> 
          <button type="submit" class="btn btn-default"> 
           <i class="icon-search icon-black"></i>Go 
          </button> 
         </form> 
        </div><!--/.nav-collapse --> 
       </div> 
      </div> 
     </div> 

如何實現這一目標？

Answer 1

只是包裝一個div裏面的導航欄，並添加這些CSS類將它設置樣式爲class="navbar navbar-fixed-top"

例子：http://jsfiddle.net/codovations/Uy5tt/show/

PS：從URL的末尾刪除展會上看到的HTML

更新：基本上這是他們適用於div使它固定在頂部。

.navbar-fixed-top { 
    position: fixed; 
    right: 0; 
    left: 0; 
    z-index: 1030; 
    top: 0; 
}