Bootstrap 4에서 반응형 탐색바 사이드바 서랍을 어떻게 만들 수 있나요?

Bootstrap 5에 내장된 Offcanvas 구성 요소 사용

Bootstrap 5 베타 3에는 새로운 Offcanvas 구성 요소가 도입되었습니다. 이 구성 요소를 사용하면 사이드바를 쉽게 만들 수 있습니다.

Bootstrap 웹 사이트에서 사용 중인 이 구성 요소의 예를 볼 수 있습니다.

Bootstrap 4에서 반응형 탐색 모음 사이드바 서랍 만들기

Bootstrap 4에서 반응형 탐색바 사이드바 서랍을 만들려면 축소, 쌓인 알약 및 알약을 조합하여 사용할 수 있습니다. flexbox.

container-fluid 클래스와 높이 100vh로 컨테이너 div를 생성하는 것부터 시작합니다.

<div class="container-fluid h-100">
  ...
</div>

컨테이너 div 내부에 두 개의 행을 생성합니다. 첫 번째 행에는 사이드바가 포함되고 두 번째 행에는 기본 콘텐츠가 포함됩니다.

<div class="row h-100">
  <div class="col-5 col-md-3 collapse m-0 p-0 h-100 bg-dark">

기본적으로 사이드바를 숨기려면 사이드바에 축소 클래스가 지정되어야 합니다. 사이드바의 가시성을 전환하는 버튼을 추가할 수 있습니다.

<button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" role="button">
  Menu
</button>  

메인 콘텐츠의 경우 col 클래스를 사용하여 사용 가능한 나머지 공간을 채웁니다.

<div class="col">
  ...
</div>

사이드바 끈끈함, 사이드바의 탐색바에 끈끈한 상단 클래스를 추가하세요.

<ul class="nav flex-column navbar-dark sticky-top">
  ...
</ul>

마지막으로 CSS를 추가하세요. 사이드바 스타일을 지정하고 반응형으로 만듭니다.

@media (min-width: 768px) {
  #collapseExample {
    width: 250px;
  }
}

이렇게 하면 768픽셀보다 넓은 화면에서 사이드바 너비가 250픽셀이 됩니다.

위 내용은 Bootstrap 4에서 반응형 탐색바 사이드바 서랍을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!