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

Bootstrap에서 반응형 Navbar 사이드바 "서랍" 만들기

Bootstrap 5는 사이드바 생성을 단순화하는 공식 Offcanvas 구성 요소를 도입합니다. 그러나 구성 요소 없이 사이드바를 생성하는 것은 여전히 ​​가능합니다.

사이드바 탐색에 대한 고려 사항

사이드바 탐색 메뉴에는 다양한 문제가 발생할 수 있습니다.

• 응답성: 화면에 따라 사이드바의 너비, 가시성 또는 방향을 조정해야 합니까? 크기를 결정하시겠습니까?
• 다중 레벨: 탐색 항목에 하위 레벨을 포함해야 하며 높이는 어떻게 수용됩니까?
• 전환: 사이드바를 사용할 수 있나요? 버튼이나 아이콘?
• 위치: 사이드바를 페이지 콘텐츠 옆에 배치해야 할까요, 아니면 뒤에 배치해야 할까요?
• 배치: 사이드바를 왼쪽에 표시해야 할까요, 아니면 오른쪽에 표시해야 할까요? 측면?
• 스크롤: 사이드바를 어떻게 스크롤해야 하나요? 페이지와 관련이 있나요?
• 애니메이션: 사이드바를 슬라이드해야 할까요, 접어야 할까요, 아니면 페이드 아웃해야 할까요?

권장 접근 방식

여기서 특정 경우에는 오른쪽 열에 col-auto를 사용하는 대신 메뉴가 표시될 때 너비를 채우기 위해 col을 사용하는 것이 좋습니다. 축소됨:

<div class="container-fluid h-100">
  <div class="row h-100">
    <div class="col-5 col-md-3 collapse width m-0 p-0 h-100 bg-dark">
<h3 id="고정-너비의-향상된-사이드바">고정 너비의 향상된 사이드바</h3>
<p>다음 업데이트된 사이드바는 제공한 예에 더 가깝고 고정 너비, 적응형 동작 및 왼쪽/오른쪽 슬라이드 애니메이션을 제공합니다. :</p>
<pre class="brush:php;toolbar:false">/* Set sidebar width */
.w-sidebar {
    width: 200px;
    max-width: 200px;
}

/* Adjust sidebar on collapsing */
.row.collapse {
    margin-left: -200px;
    left: 0;
    transition: margin-left .15s linear;
}

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

/* Adjust sidebar on collapsing */
.row.collapsing {
    margin-left: -200px;
    left: -0.05%;
    transition: all .15s linear;
}

모든 기능을 갖춘 사이드바

이 고급 사이드바에는 추가 기능이 포함되어 있습니다. 기능:

• 고정 너비
• 적응형 동작(화면 기반 축소 또는 오버레이) 크기)
• 전환
• 반응형(작은 화면에서는 오버레이가 됨)

/* Optional for overlay sidebar on small screens */
@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;
    }
}