데스크탑에서 부트스트랩 반응형 메뉴 자동 종료를 방지하는 방법은 무엇입니까?

Bootstrap의 반응형 메뉴 자동 종료

문제:

Bootstrap 웹사이트에서, 반응형 메뉴는 "제품" 버튼을 클릭하면 흰색 막대가 열립니다. 단, 웹사이트가 데스크톱 모드일 때 버튼을 클릭하면 의도치 않게 메뉴가 축소됩니다.

해결 방법:

데스크탑에서 클릭 시 메뉴가 접히는 것을 방지하려면, 추가 JavaScript를 추가하지 마십시오. 대신 데이터 전환 및 데이터 대상 선택기를 포함하도록 메뉴 목록 항목을 수정하십시오. 예:

<li><a href="#Products" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

각 메뉴 항목에 대해 이 단계를 반복합니다.

오버플로 문제를 해결하기 위한 확장 솔루션:

오버플로 및 깜박임을 해결하려면 문제가 있는 경우 다음 코드를 통합하세요.

<li><a href="#products" class="hidden-xs">Products</a></li>
<li><a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a></li>

이렇게 하면 토글 및 대상 선택기가 화면 크기에 맞게 지정되어 더 큰 화면에서 결함이 제거됩니다.

부트스트랩 버전 호환성:

Bootstrap 버전 4.1.3 및 5.0에서는 표시/숨김 클래스가 더 이상 사용되지 않습니다. Hidden-xs 대신 d-none d-sm-block을 사용하고 visible-xs 대신 d-block d-sm-none을 사용하세요. Bootstrap 버전 5에서는 data-toggle을 data-bs-toggle로, data-target을 data-bs-target으로 바꾸세요.

위 내용은 데스크탑에서 부트스트랩 반응형 메뉴 자동 종료를 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!