Bootstrap 5 Navbar 드롭다운: 내 드롭다운이 축소되지 않는 이유는 무엇이며 어떻게 해결합니까?

Bootstrap 5 Navbar 드롭다운 문제: 축소 기능 해결

이 토론에서는 Bootstrap을 사용하여 반응형 메뉴 또는 드롭다운 버튼을 만들려고 할 때 발생하는 문제를 해결합니다. 5. 필요한 탐색 및 드롭다운 아이콘을 통합했음에도 불구하고 드롭다운 메뉴가 여전히 응답하지 않습니다. 또한 저자는 mr-auto 및 ml-auto와 같은 다른 Bootstrap 클래스에서 어려움을 겪었습니다.

이러한 문제의 근본 원인은 Bootstrap 4에서 Bootstrap 5로의 전환에 있습니다. Bootstrap 5에는 중요한 변경 사항이 도입되었습니다. 모든 JavaScript 플러그인에 대해 data- 속성을 ​​data-bs- 속성으로 대체하는 것을 포함합니다. 이 수정 사항은 Collapse, Navbar, Carousel, Dropdown, Tabs 및 Modal을 포함한 다양한 JavaScript 구성 요소에 적용됩니다.

드롭다운 축소 문제를 해결하기 위해 다음 스니펫은 올바른 구문을 보여줍니다.

<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
    <span class="navbar-toggler-icon"></span>
</button>

이렇게 하면 데이터 속성이 Bootstrap 5 규칙을 준수하게 됩니다.

또한 Bootstrap 5에는 새로운 클래스가 도입되었습니다. 이전에 사용된 ml-auto 및 mr-auto 클래스를 대체하는 ms-auto 및 me-auto와 같은 수평 정렬을 관리합니다.

위 내용은 Bootstrap 5 Navbar 드롭다운: 내 드롭다운이 축소되지 않는 이유는 무엇이며 어떻게 해결합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!