더 작은 장치에 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











Smart Forms 프레임 워크로 JavaScript 연락처 양식 작성

5 개의 최고의 PHP 양식 빌더 (및 3 개의 무료 스크립트) 비교
