Bootstrap 3 Navbar 축소를 어떻게 방지할 수 있습니까?

Bootstrap 3에서 Navbar 축소 비활성화

Bootstrap의 navbar 구성 요소는 편리하고 응답성이 뛰어난 탐색 시스템을 제공합니다. 기본적으로 탐색 모음은 모바일 접근성을 향상시키기 위해 더 작은 화면 크기에서 축소됩니다. 그러나 어떤 경우에는 탐색 표시줄이 항상 표시되도록 하기 위해 이 축소 동작을 비활성화할 수 있습니다.

이를 달성하는 한 가지 접근 방식은 탐색 표시줄 축소를 담당하는 기본 CSS 스타일을 재정의하는 것입니다. 해결해야 할 특정 속성은 다음과 같습니다.

.navbar-collapse.collapse {
  display: block!important;
}

.navbar-nav>li, .navbar-nav {
  float: left !important;
}

.navbar-nav.navbar-right:last-child {
  margin-right: -15px !important;
}

.navbar-right {
  float: right!important;
}

이러한 속성을 재정의하면 탐색 모음이 작은 화면에서 축소되는 것을 방지할 수 있습니다.

설명:

• .navbar-collapse.collapse: 이 속성은 축소된 navbar의 상태를 유지하고 표시를 차단하여 표시되도록 설정합니다.
• .navbar-nav>li, .navbar-nav: 이 속성은 왼쪽 및 오른쪽 메뉴 항목(토글 포함)이 모두 버튼)은 항상 인라인으로 표시됩니다.
• .navbar-nav.navbar-right:last-child: 이 속성은 마지막 요소의 사소한 간격 문제를 수정합니다. 태블릿 크기 화면의 오른쪽 메뉴.
• .navbar-right: 이 속성은 플로트를 오른쪽으로 설정하여 작은 화면에서 오른쪽 메뉴를 올바르게 배치합니다.

이러한 CSS 재정의를 구현하면 Bootstrap 3에서 탐색 표시줄 축소 동작을 성공적으로 비활성화할 수 있습니다. 이 기술을 사용하면 복잡하거나 과도한 CSS가 필요 없이 모든 뷰포트 크기에서 표시되는 탐색 표시줄을 유지할 수 있습니다. 규칙.

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