Bootstrap 3에서 Navbar 축소를 방지하는 방법은 무엇입니까?

Bootstrap 3에서 Navbar 축소 방지

Bootstrap 3에서는 공간을 절약하기 위해 더 작은 화면에서 navbar를 축소할 수 있습니다. 이는 많은 경우에 유용할 수 있지만 이 동작을 비활성화하고 탐색 메뉴를 항상 표시하려면 다음 방법을 따르세요.

CSS 사용자 정의

탐색 모음 축소를 방지하려면 몇 가지 기본 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는 접힌 요소를 숨기는 기본 display 속성을 ​​재정의합니다. 대신 디스플레이를 block으로 설정하여 표시합니다.
• .navbar-nav>li, .navbar-nav는 왼쪽 메뉴 항목을 강제로 표시합니다. float left.
• .navbar-nav.navbar-right:last-child는 맨 오른쪽 메뉴 항목에 미묘한 여백 조정을 제공합니다.
• .navbar-right는 오른쪽 메뉴가 오른쪽으로 이동하도록 보장합니다.

구현

이러한 변경 사항을 구현하려면, 제공된 CSS를 스타일시트에 추가하세요. 또는 스타일을 HTML 코드에 직접 인라인할 수 있습니다.

설명

이러한 CSS 속성은 함께 작동하여 모든 화면 크기에서 navbar 요소가 계속 표시되도록 합니다.

• .navbar-collapse.collapse 속성은 축소 기능을 재정의합니다.
• .navbar-nav>li, .navbar-nav 및 .navbar-right 오른쪽 메뉴가 왼쪽 메뉴와 올바르게 정렬되어 있는지 확인하세요.

위 내용은 Bootstrap 3에서 Navbar 축소를 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!