Fluid Twitter Bootstrap 2.0 레이아웃에서 고정 사이드바 탐색을 만드는 방법은 무엇입니까?

Fluid Twitter Bootstrap 2.0에서 고정 사이드바 탐색 만들기

Fluid Bootstrap 2.0 레이아웃에서는 스크롤하는 동안 고정 사이드바 탐색을 유지하는 것이 가능합니다. 달성. 방법은 다음과 같습니다.

1. 사용자 정의 사이드바 클래스 생성:
   .sidebar-nav-fixed와 같은 고정 사이드바에 대한 CSS 클래스를 정의합니다. 위치와 같은 속성을 할당합니다: 고정, 상단 및 너비.
2. 오프셋 콘텐츠 클래스 생성:
   고정 사이드바에 의해 생성된 왼쪽 여백을 보상하려면 오프셋 클래스를 추가하세요. 콘텐츠 사업부에. 예를 들어 .row-fluid > .span-fixed-sidebar는 고정 사이드바의 너비와 동일한 여백 왼쪽 속성을 가질 수 있습니다.

3. 업데이트된 CSS:

   .sidebar-nav-fixed {
       padding: 9px 0;
       position: fixed;
       left: 20px;
       top: 60px;
       width: 250px;
   }
   
   .row-fluid > .span-fixed-sidebar {
       margin-left: 290px;
   }

4. 반응형 수정:
   다음으로 다양한 화면 크기에 적응하려면 미디어 쿼리 사용을 고려하세요. 예를 들면 다음과 같습니다.

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

5. 모바일 보기를 위한 추가 방법:
   작은 화면에서 정적으로 될 때까지 고정 사이드바를 유지하려면 CSS를 다음과 같이 조정합니다. 다음:

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

참고: Bootstrap 버전 2.0.4 이상인 경우 유사한 기능을 제공하는 Affix jQuery 플러그인 사용을 고려해 보세요.

위 내용은 Fluid Twitter Bootstrap 2.0 레이아웃에서 고정 사이드바 탐색을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!