Fluid Bootstrap 2.0 레이아웃에서 고정 사이드바를 구현할 수 있습니까?

Fluid Bootstrap 2.0 레이아웃에서 고정 사이드바 유지

문제: 사이드바 탐색을 고정하는 것이 가능합니까? 유동적인 레이아웃 스크롤하시나요?

해결책: 예, 가능합니다. 방법은 다음과 같습니다.

1. 사이드바에 대한 고정 클래스 만들기:

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

2. 오프셋 적용 내용에 맞는 수업 div:

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

이 CSS는 스크롤하는 동안 사이드바가 고정된 상태로 유지되도록 하고 사이드바의 너비를 보상하기 위해 콘텐츠 영역을 조정합니다.

정제됨 해결 방법:

• 업데이트: Bootstrap의 반응형 레이아웃을 지원하기 위해 데모가 다음 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;
    }
}

• 대체 접근 방식: 레이아웃이 전환될 때까지 고정 사이드바를 유지하려면 모바일 보기:

.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;
    }
}

참고: Bootstrap 2.0.4 및 이전 버전에는 사이드바 요소 수정을 위한 고급 기능을 제공하는 Affix jQuery 플러그인이 없습니다. 이 솔루션은 이전 Bootstrap 버전에만 적용 가능합니다.

위 내용은 Fluid Bootstrap 2.0 레이아웃에서 고정 사이드바를 구현할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!