내비게이션 바는 앱이나 웹사이트에서 탐색 헤더 역할을 하는 반응형 기본 구성 요소입니다. 모바일 장치에서는 접히고(열리고 닫힐 수 있음) 뷰포트 너비가 증가함에 따라 점차 수평으로 확장됩니다.
정렬된 탐색 모음 탐색 링크는 더 이상 사용되지 않습니다.
내비게이션 바에 포함된 요소가 오버플로됩니다
부트스트랩은 네비게이션 바에 배치해야 하는 공간이 얼마나 넓어야 하는지 모르기 때문에 네비게이션 바의 내용이 줄 바꿈되는 상황(즉, 네비게이션 바가 두 줄을 차지함)이 발생할 수 있습니다. 해결 방법은 다음과 같습니다.
- 탐색 모음의 모든 요소가 차지하는 너비를 줄입니다.
- 특정 화면 크기의 탐색 모음 내에서 일부 요소를 숨깁니다(반응형 유틸리티 클래스 사용).
- 내비게이션 바의 가로 배열과 접기 배열 간의 변환을 트리거하는 최소 화면 너비 값을 수정합니다. 이는
@grid-float-breakpoint 변수를 수정하거나 관련 미디어 쿼리 코드를 직접 다시 작성하여 부트스트랩의 기본값을 재정의함으로써 달성할 수 있습니다.
자바스크립트에 따라 다름
JavaScript가 비활성화되어 있고 탐색 표시줄이 접힐 정도로 뷰포트가 좁은 경우 탐색 표시줄이 열리지 않고 .navbar-collapse에 포함된 콘텐츠가 표시되지 않습니다.
뷰포트의 임계값을 수정하여 탐색 모음의 정렬 모드에 영향을 줍니다
브라우저 뷰포트(뷰포트)의 너비가 @grid-float-breakpoint 값보다 작으면 탐색 표시줄 내부 요소가 접혀지고, 브라우저 뷰포트(뷰포트) 너비가 작아지면 모바일 장치 디스플레이 모드로 변환됩니다. )가 @grid-float-breakpoint보다 큼 값을 설정하면 탐색 모음 내부 요소가 가로로 정렬되어 모바일 기기가 아닌 디스플레이 모드로 표시됩니다. 소스 코드에서 이 값을 조정하면 탐색 모음이 쌓이는 시기와 수평으로 배열되는 시기를 제어할 수 있습니다. 기본값은 768px(작은 화면 또는 태블릿의 최소값)입니다.
