Bootstrap 5에서 반응형 Navbar 사이드바 '서랍'을 만드는 방법은 무엇입니까?

Bootstrap에서 반응형 탐색 모음 사이드바 "서랍"을 만드시겠습니까?

Bootstrap 5 베타 3(2021년 업데이트) 사용

Bootstrap은 이제 Offcanvas 구성 요소를 제공하여 더 쉽게 만들 수 있습니다.

Bootstrap 4 사용(원래 답변)

사이드바 고려 사항:

• 응답성
• 다단계 구조
• 토글 가능성
• 위치 지정(푸시 대 오버레이, 왼쪽 또는 오른쪽)
• 고정 또는 고정 동작
• 애니메이션 스타일

구체적인 문제 해결 요구 사항:

1. 응답성:

• 올바른 열 클래스를 col-auto 대신 col로 업데이트합니다.

2. Navbar 스크롤:

• 고착되는 것을 방지하려면 끈적끈적한 상단 클래스를 navbar에서 제거하세요.

3. 고정 메뉴 버튼:

• 메뉴 버튼은 사이드바에 정렬되지 않으므로 고정되어서는 안 됩니다.

4. 배경 조광기:

• 이 답변에서는 다루지 않습니다.

향상된 기능이 포함된 사이드바의 예:

이 예시 사이드바는 참조 링크의 사이드바와 매우 유사하며 포함 사항:

• 고정 너비
• 작은 화면에서는 자동 닫기, 더 넓은 화면에서는 열기
• 모든 너비에서 전환 가능
• 반응형 오버레이 사이드바 켜짐 더 작은 화면

정식 버전용 추가 CSS:

.w-sidebar {
    width: 200px;
    max-width: 200px;
}

.row.collapse {
    margin-left: -200px;
    left: 0;
    transition: margin-left .15s linear;
}

.row.collapse.show {
    margin-left: 0 !important;
}

.row.collapsing {
    margin-left: -200px;
    left: -0.05%;
    transition: all .15s linear;
}

@media (max-width:768px) {

    .row.collapse,
    .row.collapsing {
        margin-left: 0 !important;
        left: 0 !important;
        overflow: visible;
    }
    
    .row > .sidebar.collapse {
        display: flex !important;
        margin-left: -100% !important;
        transition: all .3s linear;
        position: fixed;
        z-index: 1050;
        max-width: 0;
        min-width: 0;
        flex-basis: auto;
    }
    
    .row > .sidebar.collapse.show {
        margin-left: 0 !important;
        width: 100%;
        max-width: 100%;
        min-width: initial;
    }
    
    .row > .sidebar.collapsing {
        display: flex !important;
        margin-left: -10% !important;
        transition: all .2s linear !important;
        position: fixed;
        z-index: 1050;
        min-width: initial;
    }
}

데모: https://codeply.com/go/w1AMD1EY3c

위 내용은 Bootstrap 5에서 반응형 Navbar 사이드바 '서랍'을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!