매우 긴 수직 페이지 레이아웃을 가진 애플리케이션의 경우 화면 상단에 TwitterBootstrap의 탐색 바를 고정 시키십시오.

Question

부트 스트랩 템플릿을 http://www.initializr.com/ 에서 다운로드했습니다. 내 질문은 내 웹 페이지의 바닥 글까지 스크롤 할 때마다 탐색 모음을 화면 상단에 고정시키는 방법입니다. 내가 성취하려는 것을 더 잘 이해하기 위해 스크린 샷을 만들었습니다.

예 : 모바일 장치의 관점에서이 NAVBAR 고정

예입니다 : 나는 내가 NAVBAR이 상단에 고정 된 상태를 유지하려는 페이지의 바닥 글로 스크롤 화면. 보시다시피 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

그냥 사업부 내부의 탐색 모음을 포장하고로 스타일에 이러한 CSS 클래스를 추가 class="navbar navbar-fixed-top"

예 : http://jsfiddle.net/codovations/Uy5tt/show/

PS : HTML을 볼 수있는 URL의 끝에서 쇼를 제거

업데이트 : 기본적으로 div에 적용되어 상단에 고정됩니다.

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