Fluid Twitter Bootstrap 2.0에서 사이드바 탐색 문제를 해결하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

Fluid Twitter Bootstrap 2.0에서 사이드바 탐색 문제를 해결하는 방법은 무엇입니까?

Susan Sarandon

풀어 주다： 2024-11-11 16:01:02

원래의

409명이 탐색했습니다.

How to Fix the Sidebar Navigation in Fluid Twitter Bootstrap 2.0?

Fluid Twitter Bootstrap 2.0에서 사이드바 탐색 수정

유동적 레이아웃에서 스크롤하는 동안 고정된 상태로 유지되는 사이드바 탐색을 구현하는 것은 간단합니다.

구현

CSS

새로운 사이드바 탐색 고정 클래스를 정의하여 사이드바를 수정하고 콘텐츠 div에 오프셋 클래스를 추가하세요. 왼쪽 여백을 보상하려면:

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

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

로그인 후 복사

업데이트됨 옵션

반응형 호환성을 위해 다음 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-->

로그인 후 복사

이로 인해 고정 사이드바에 약간의 너비 불일치가 있다는 점에 유의하세요. 컨테이너 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;
    }
}

로그인 후 복사

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