[css] 유동 트위터 부트 스트랩 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>