Bootstrap 5의 탐색 모음 드롭다운 메뉴(축소)에 기능적 문제가 있습니다.
P粉322319601
2023-08-22 20:42:45
<p><code>Bootstrap 5</code>를 사용하여 반응형 메뉴나 드롭다운 버튼을 만드는 동안 문제가 발생했습니다. 모든 것이 괜찮은 것 같습니다. 탐색 아이콘과 드롭다운 아이콘이 표시됩니다. 그러나 그들은 작동하지 않습니다. <code>nav</code> 아이콘이나 <code>드롭다운</code> 버튼을 클릭하면 <code>드롭다운 메뉴</code>가 표시되지 않습니다. </p>
<p><code>jquery</code> 파일도 포함했다는 점을 구체적으로 언급하고 싶습니다. 그러나 그것은 작동하지 않았습니다. 누군가 여기서 무슨 일이 일어나고 있는지 말해 줄 수 있습니까? </p>
<p>마지막으로, 저는 다른 <code>bootstrap</code> 클래스(예: <code>mr-auto</code>, <code>ml-auto</code> 등)를 사용하고 있습니다. .) 심각한 문제가 발생했습니다.이것은 버그입니까, 아니면 <code>bootstrap 5</code>에서 이러한 종류의 작업을 수행하는 새로운 클래스를 도입합니까? </p>
<p><strong>내 코드는 다음과 같습니다.</strong></p>
<p><br /></p>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html lang="ko">
<머리>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>부트스트랩</title>
<링크
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
rel="스타일시트"
무결성="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="익명"
/>
</머리>
<본문>
<nav class="navbar navbar-dark bg-dark navbar-expand-md">
<a href="#" class="navbar-brand">데모테크</a>
<버튼
class="navbar-toggler"
데이터 토글="접기"
data-target="#navbar"
>
<span class="navbar-toggler-icon"></span>
</버튼>
<div class="navbar-collapsecollapse" id="navbar" navbar>
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">홈</a></li>
<li class="nav-item"><a href="#" class="nav-link">정보</a></li>
<li class="nav-item"><a href="#" class="nav-link">연락처</a></li>
</ul>
</div>
</nav>
<스크립트
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
무결성="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="익명"
></script>
</body>
</html></pre>
<p><br /></p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
In Bootstrap 5, Bootstrap 4
에서 사용됨 으아악data-*属性已被替换为data-bs-*데모
docs에 설명된 대로 이제 모든 JavaScript 플러그인의 데이터 속성이 네임스페이스화되어 Bootstrap 기능을 타사 및 사용자 코드와 구별하는 데 도움이 됩니다. 즉, 모든 자바스크립트 구성요소(collapse, navbar, carousel, dropdown, tab, modal 등)는
data-bs-...속성만 사용할 수 있습니다.Bootstrap 5는 획기적인 변경 사항이 포함된 주요 업데이트입니다. 그리고 여기서 ,
ml-auto/mr-auto已更改为ms-auto/me-auto확인해 보세요.