Bootstrap Navbar 축소 중단점을 어떻게 재정의할 수 있습니까?

Bootstrap Navbar 축소 중단점 재정의

특정 시나리오에서는 Bootstrap Navbar의 기본 축소 중단점을 768px로 수정해야 합니다. 이 가이드에서는 LESS를 사용하지 않고 이 동작을 변경하는 대체 방법을 조사합니다.

Bootstrap 5(2023 업데이트)

Bootstrap 5에서는 단순화된 접근 방식을 도입합니다. 고정된(절대 접히지 않는) 탐색 모음을 위해 탐색 모음에 .navbar-expand 클래스를 추가하기만 하면 됩니다. 영구적으로 축소된 navbar의 경우 클래스를 모두 생략합니다.

Bootstrap 4(2018 업데이트)

Bootstrap 4는 .navbar-expand- 도입으로 navbar 중단점 제어를 향상합니다. * 클래스:

• .navbar-expand-sm: 화면 너비가 576px 미만인 모바일 메뉴
• .navbar-expand-md: 화면 너비가 768px 미만인 모바일 메뉴
• .navbar-expand-lg: 화면 너비가 다음보다 작은 모바일 메뉴 992px
• .navbar-expand-xl: 화면 너비가 1200px 미만인 모바일 메뉴
• .navbar-expand: 고정된 navbar, 절대 접히지 않음
• (확장 클래스 없음): 항상 모바일 메뉴 표시

또는 사용자 정의 중단점을 정의할 수 있습니다:

@media (min-width: 1300px) {
  .navbar-expand-custom {
    flex-direction: row;
    ...
  }
}

Bootstrap 3

Bootstrap 3.3.x의 경우 다음 CSS를 사용하여 중단점을 재정의할 수 있습니다.

@media (max-width: 991px) {
  .navbar-header {
    float: none;
  }
  ...
}

위 내용은 Bootstrap Navbar 축소 중단점을 어떻게 재정의할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!