Bootstrap에서 제품 메뉴 클릭으로 반응형 탐색을 닫는 방법은 무엇입니까?

부트스트랩의 제품 메뉴 클릭으로 반응형 Nav 닫기

반응형 모드에서 기본 메뉴를 확장할 때 자동 축소 문제가 발생할 수 있습니다. "제품" 메뉴 항목을 클릭합니다. 이 문제를 해결하려면 Bootstrap에 내장된 데이터 속성과 클래스를 활용하면 됩니다.

추가 JavaScript를 활용하는 대신 메뉴 목록 항목에 다음 데이터 속성을 추가하세요.

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

이 작업을 반복하세요.

반응형 추가 조정 디자인

더 큰 화면에서 콘텐츠가 넘쳐나고 깜박이는 문제를 해결하려면 다음 코드를 사용하세요.

<li><a href="#products">

이 코드는 화면 크기에 따라 특정 데이터 속성을 할당하여 데스크탑의 결함을 제거합니다. 메뉴.

부트스트랩 업데이트 중 버전

Bootstrap 버전 4.1.3 및 5.0의 경우 표시/숨겨진 클래스를 d-none d-sm-block 및 d-block d-sm-none으로 대체하세요.

Bootstrap 5에서 데이터 속성을 data-bs-toggle 및 data-bs-target으로 수정합니다.

이를 통해 조정을 수행하면 반응형 탐색 표시줄을 자동으로 닫고 다양한 화면 크기에서 기능 문제 없이 제품 메뉴를 표시할 수 있습니다.

위 내용은 Bootstrap에서 제품 메뉴 클릭으로 반응형 탐색을 닫는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!