Bootstrap Navbar: 작은 장치에서 내 로고와 메뉴 항목이 사라지는 이유는 무엇입니까?

Bootstrap Navbar: 소형 장치에서 사라지는 요소 해결

중앙 로고와 메뉴 항목이 포함된 Bootstrap Navbar를 디자인할 때 다음 사항을 확인하는 것이 중요합니다. 여러 장치에 걸쳐 최적의 디스플레이를 제공합니다. 하지만 작은 화면에서는 로고와 햄버거 메뉴를 포함한 모든 요소가 사라지는 문제가 발생할 수 있습니다.

이러한 현상이 사라지는 근본적인 이유는 종종 Navbar에 적용된 navbar-default 클래스와 관련이 있습니다. 부트스트랩의 이전 버전. 즉시 눈에 띄지 않을 수도 있지만 이 클래스는 배경색을 설정하고 햄버거 아이콘을 표시하는 데 필수적입니다.

해결책 1: Bootstrap 5 및 Modern Bootstrap

Bootstrap 5 및 최신 버전에서는 navbar-default 클래스가 대체되었습니다. 햄버거 아이콘을 표시하려면 navbar 요소에 navbar-light 또는 navbar-dark 클래스를 추가해야 합니다. 예:

<nav>

해결책 2: 배경색 추가(Bootstrap 4 이하)

Bootstrap 4 이하를 사용하는 경우 다음을 해결할 수 있습니다. navbar-nav 요소에 배경색을 추가하여 문제를 해결합니다.

#navbar-primary .navbar-nav {
   background: #ededed;
}

해결책 3: 토글러 어둡게 하기(Bootstrap 4 이하)

다른 옵션 Bootstrap 4 이하에서는 .icon-bar 클래스를 수정하여 토글러 아이콘을 어둡게 합니다:

.navbar-toggle .icon-bar {
    background-color: rgb(136, 136, 136);
}

Bootstrap 3에 대한 추가 참고 사항:

Bootstrap 3의 경우, 메뉴 항목을 적절하게 정렬하려면 navbar-default 클래스를 포함해야 합니다.

이러한 솔루션 중 하나를 구현하면 Bootstrap navbar가 장치에 관계없이 모든 화면 크기에서 의도한 대로 표시되도록 할 수 있습니다. 사용했습니다.

위 내용은 Bootstrap Navbar: 작은 장치에서 내 로고와 메뉴 항목이 사라지는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!