더 작은 장치에 Bootstrap Navbar 로고와 햄버거 메뉴를 표시하는 방법은 무엇입니까?

Bootstrap Navbar: 작은 장치에 요소 표시

이 질문은 로고 이미지가 있는 Bootstrap 탐색 모음이 작은 화면에서 사라지는 문제를 해결합니다. , 로고와 햄버거 메뉴 표시를 방해합니다.

해결책은 Bootstrap에서 제공하는 적절한 유틸리티 클래스를 사용하여 여러 장치에 걸쳐 적절한 표시를 보장하는 것입니다.

Bootstrap 5:

Bootstrap 5의 경우 햄버거 아이콘을 표시하려면 "navbar-light" 또는 "navbar-dark" 클래스를 포함해야 합니다. 탐색 모음에 이러한 클래스 중 하나를 추가하기만 하면 햄버거가 표시됩니다.

Bootstrap 4 이하:

Bootstrap 4 이하를 사용하는 경우 버전에서는 다음 솔루션 중 하나를 사용할 수 있습니다.

• 배경색 추가: 지정된 배경색 없이도 보이도록 탐색 모음에 배경색을 할당합니다. 속성.
• 토글러 어둡게 하기: 토글러 아이콘 막대의 배경색을 수정하여 더 나은 대비를 제공하고 더 눈에 띄게 만듭니다.

코드 조각:

배경 색상:

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

어두운 토글:

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

Bootstrap 4.0.0 업데이트:

Bootstrap 4.0.0에서는 "navbar-default" 클래스가 더 이상 사용되지 않습니다. 대신, 밝은 색상의 탐색바에는 "navbar-light bg-light"를 사용하고, 어두운 색상의 탐색바에는 "navbar-dark bg-dark"를 사용하세요.

위 내용은 더 작은 장치에 Bootstrap Navbar 로고와 햄버거 메뉴를 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!