유동 트위터 부트 스트랩 2.0의 고정 사이드 바 탐색

유동 레이아웃에서 사이드 바 탐색이 항상 스크롤에 고정되도록 할 수 있습니까?

참고 : 이 작업을 수행하는 부트 스트랩 jQuery 플러그인이 있으며이 답변이 작성된 후 (거의 2 년 전) Affix 라는 몇 가지 버전이 도입되었습니다 . 이 답변은 Bootstrap 2.0.4 이하를 사용하는 경우에만 적용됩니다.

예, 간단히 사이드 바에 대한 새 고정 클래스를 만들고 콘텐츠 div에 오프셋 클래스를 추가하여 왼쪽 여백을 보완합니다.

CSS

.sidebar-nav-fixed {
    padding: 9px 0;
    position:fixed;
    left:20px;
    top:60px;
    width:250px;
}

.row-fluid > .span-fixed-sidebar {
    margin-left: 290px;
}

데모 : http://jsfiddle.net/U8HGz/1/show/ 여기에서 편집 : http://jsfiddle.net/U8HGz/1/

최신 정보

반응 형 부트 스트랩 시트를 지원하도록 데모를 수정했습니다. 이제 부트 스트랩의 반응 형 기능과 함께 흐릅니다.

참고 :이 데모는 상단 고정 탐색 모음과 함께 흐르기 때문에 두 요소 모두 position:static화면 크기가 조정되면 화면이 모바일보기로 떨어질 때까지 고정 된 사이드 바를 유지하는 다른 데모를 아래에 배치했습니다.

CSS

.sidebar-nav-fixed {
     position:fixed;
     top:60px;
     width:21.97%;
 }

 @media (max-width: 767px) {
     .sidebar-nav-fixed {
         width:auto;
     }
 }

 @media (max-width: 979px) {
     .sidebar-nav-fixed {
         position:static;
        width: auto;
     }
 }

HTML

<div class="container-fluid">
<div class="row-fluid">
 <div class="span3">
   <div class="well sidebar-nav sidebar-nav-fixed">
    ...
   </div><!--/.well -->
 </div><!--/span-->
 <div class="span9">
    ...
 </div><!--/span-->
</div><!--/row-->

</div><!--/.fluid-container-->

데모 , 여기 에서 편집 하십시오 .

^{사소한 참고 사항 : 고정 사이드 바의 너비에 약 10px / 1 % 차이가 있습니다. 이는 고정되어 있기 때문에 span3 컨테이너 div에서 너비를 상속하지 않기 때문에 폭. 충분히 가깝습니다.}

작은 화면 / 모바일보기를 위해 그리드가 떨어질 때까지 사이드 바를 고정하려는 경우 다른 방법이 있습니다.

CSS

.sidebar-nav-fixed {
    position:fixed;
    top:60px;
    width:21.97%;
}

@media (max-width: 767px) {
    .sidebar-nav-fixed {
        position:static;
        width:auto;
    }
}

@media (max-width: 979px) {
    .sidebar-nav-fixed {
        top:70px;
    }
}

데모 , 여기 에서 편집 하십시오 .

최신 Boostrap (2.1.0)에는 특히 이러한 유형의 애플리케이션 FYI를위한 새로운 JS "affix"기능이 있습니다.

이것은 반응 형 웹 디자인을 망칠 것입니다. 미디어 쿼리에서 고정 사이드 바를 더 잘 감싸십시오.

CSS

@media (min-width: 768px) { 
  .sb-fixed{
    position: fixed;
  } 
}

HTML

<div class="span3 sb-fixed">
   <div class="well sidebar-nav">
      <!-- Sidebar Contents -->
   </div>
</div>

이제 사이드 바는 뷰포트가 768px보다 큰 경우에만 고정됩니다.

자바 스크립트 없이는 불가능합니다. affix.js가 너무 복잡하다는 것을 알기 때문에 차라리 다음을 사용합니다.

끈적 끈적한

나는 Andres의 답변으로 시작하여 다음과 같은 끈적 끈적한 사이드 바를 얻었습니다.

HTML :

<div class="span3 sidebar-width">
  <div class="well sidebar-nav-fixed">
    Sidebar
  </div>
</div>

<div class="span9 span-fixed-sidebar">
  Content
</div> <!-- /span -->

CSS :

.sidebar-nav-fixed {
  position:fixed;
}

JS / jQuery :

sidebarwidth = $(".sidebar-width").css('width');
$('.sidebar-nav-fixed').css('width', sidebarwidth);
contentmargin = parseInt(sidebarwidth) + 60;
$('.span-fixed-sidebar').css('marginLeft', contentmargin);

뷰포트의 크기가 조정될 때 'sidebarwidth'변수를 업데이트하기 위해 JS도 필요하다고 가정하고 있습니다.

수정 탐색 또는 원하는 모든 태그를 쉽게 얻을 수 있습니다. 이처럼 수정 태그를 작성하고 본문 섹션에 입력하기 만하면됩니다.

   <div style="position: fixed">
       test - try  scroll again. 
   </div>

현재 부트 스트랩 버전 (3.3.2)에는 탐색을위한 고정 사이드 바를 만드는 좋은 방법이 있습니다.

이 솔루션은 또한 다시 도입 된 container-fluid 클래스와도 잘 작동하므로 반응 형 전체 화면 레이아웃을 쉽게 가질 수 있습니다.

일반적으로 고정 된 너비와 여백을 사용해야합니다. 그렇지 않으면 탐색이 콘텐츠와 겹치지 만 빈 자리 표시 자 열을 사용하면 콘텐츠가 항상 올바른 위치에 배치됩니다.

아래 설정은 창 크기를 768px 미만으로 조정할 때 콘텐츠를 감싸고 고정 된 탐색을 해제합니다.

작업 예제는 http://www.bootply.com/ePvnTy1VII 를 참조 하십시오 .

CSS

@media (min-width: 767px) { 
    #navigation{
        position: fixed;
    }
}

HTML

<div class="container-fluid">
 <div class="row">
  <div id="navigation" class="col-lg-2 col-md-3 col-sm-3">
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 1</a></li>
    </ul>
  </div>

  <div class="col-lg-2 col-md-3 col-sm-3 hidden-xs">
    <!-- Placeholder - keep empty -->
  </div> 

  <div id="main" class="col-lg-10 col-md-9 col-sm-9 fill">
     ...
     Huge Content
     ...
  </div> 
 </div>
</div>