Bootstrap 3 Navbar가 붕괴되는 것을 방지하는 방법은 무엇입니까?

Bootstrap 3에서 Navbar 축소를 방지하는 방법

소개

Bootstrap 3의 navbar 메뉴는 다음을 제공합니다. 작은 화면에서 메뉴 항목을 축소 및 확장하는 편리한 방법입니다. 그러나 경우에 따라 이 축소 동작을 비활성화하고 메뉴를 항상 표시할 수 있습니다. 이 기사는 이 문제에 대한 해결책을 제공합니다.

해결책

navbar가 접히는 것을 방지하려면 Bootstrap의 기본 스타일을 재정의할 수 있습니다. 업데이트해야 하는 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: 이 속성 작은 화면에서 오른쪽 메뉴 항목의 기본 숨겨진 상태를 재정의하여 해당 항목이 유지되도록 합니다. visible.
• .navbar-nav>li, .navbar-nav: 이 속성은 왼쪽 및 오른쪽 메뉴 항목이 모두 왼쪽으로 떠서 메뉴 항목이 같은 줄.
• .navbar-nav.navbar-right:last-child: 이 속성 특정 해상도에서 발생할 수 있는 여백 문제를 수정합니다.
• .navbar-right: 이 속성은 오른쪽 메뉴를 화면 오른쪽에 정렬되도록 유지합니다.

예

이러한 CSS 변경 사항을 프로젝트에 통합하면 navbar 축소 동작:

<link rel="stylesheet" href="css/custom-styles.css">

/* Custom Navbar Styles */
.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;
}

이러한 CSS 수정을 구현하면 Bootstrap 3에서 navbar 축소를 쉽게 방지하고 메뉴가 모든 화면 해상도에서 계속 표시되도록 할 수 있습니다.

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