부트스트랩 - 네비게이션 바

기본 스타일 탐색 모음

내비게이션 바는 앱이나 웹사이트에서 탐색 헤더 역할을 하는 반응형 기본 구성 요소입니다. 모바일 장치에서는 접히고(열리고 닫힐 수 있음) 뷰포트 너비가 증가함에 따라 점차 수평으로 확장됩니다.

정렬된 탐색 모음 탐색 링크는 더 이상 사용되지 않습니다.

내비게이션 바에 포함된 요소가 오버플로됩니다

부트스트랩은 네비게이션 바에 배치해야 하는 공간이 얼마나 넓어야 하는지 모르기 때문에 네비게이션 바의 내용이 줄 바꿈되는 상황(즉, 네비게이션 바가 두 줄을 차지함)이 발생할 수 있습니다. 해결 방법은 다음과 같습니다.

1. 탐색 모음의 모든 요소가 차지하는 너비를 줄입니다.
2. 특정 화면 크기의 탐색 모음 내에서 일부 요소를 숨깁니다(반응형 유틸리티 클래스 사용).
3. 내비게이션 바의 가로 배열과 접기 배열 간의 변환을 트리거하는 최소 화면 너비 값을 수정합니다. 이는 @grid-float-breakpoint 변수를 수정하거나 관련 미디어 쿼리 코드를 직접 다시 작성하여 부트스트랩의 기본값을 재정의함으로써 달성할 수 있습니다.

   자바스크립트에 따라 다름

   JavaScript가 비활성화되어 있고 탐색 표시줄이 접힐 정도로 뷰포트가 좁은 경우 탐색 표시줄이 열리지 않고 .navbar-collapse에 포함된 콘텐츠가 표시되지 않습니다.

   뷰포트의 임계값을 수정하여 탐색 모음의 정렬 모드에 영향을 줍니다

   브라우저 뷰포트(뷰포트)의 너비가 @grid-float-breakpoint 값보다 작으면 탐색 표시줄 내부 요소가 접혀지고, 브라우저 뷰포트(뷰포트) 너비가 작아지면 모바일 장치 디스플레이 모드로 변환됩니다. )가 @grid-float-breakpoint보다 큼 값을 설정하면 탐색 모음 내부 요소가 가로로 정렬되어 모바일 기기가 아닌 디스플레이 모드로 표시됩니다. 소스 코드에서 이 값을 조정하면 탐색 모음이 쌓이는 시기와 수평으로 배열되는 시기를 제어할 수 있습니다. 기본값은 768px(작은 화면 또는 태블릿의 최소값)입니다.