Bootstrap 5.2菜单下拉菜单不起作用-为什么

Question

我从引导程序4.6升级到5.2一切看起来都很好，只是菜单下拉菜单不起作用，所以无法进行可用的选择。我把问题归结为两个菜单选项：下拉菜单和一个简单的链接。简单链接("主页"(运行良好。下拉列表不会用于显示元素。这里怎么了？注意：菜单没有更改wrt bootstrap 4.6(除了mr auto是ml auto(。所有下拉菜单都不起作用。注意：比较这个例子：https://getbootstrap.com/docs/5.0/components/navbar/

请注意，答案可以在stackoverflow的其他地方找到，但对我来说，最能理解的是：Bootstrap数据切换与数据bs切换属性之间的区别是什么？

<script defer src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js'></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css'>
<nav class='navbar navbar-default navbar-expand-lg '>
<div class='collapse navbar-collapse justify-content-end' id='navbarSupportedContent'>
<ul class='navbar-nav mr-auto'>
<li class='nav-item dropdown'>
<a class='nav-link dropdown-toggle' href='#' id='navbarDropdownAbout' role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>About</a>
<div class='dropdown-menu' aria-labelledby='navbarDropdownAbout'>
<span class='nav-link' data-toggle='modal' data-target='#CUserAbout'>This Site</span>
<span class='nav-link' data-toggle='modal' data-target='#CUabout'>Utils</span>
<span class='nav-link' data-toggle='modal' data-target='#CUlicense'>License</span>
<a class='nav-link' href="https://wikipedia.org/" target="_blank">Wiki</a>
</div>
</li>
<li class='nav-item'> <span class='nav-link' onclick="function('charts.txt', true);">Home</span> </li>
</ul>
</div>
</nav>

Answer 1

给你。。。

将data-toggle='dropdown'(引导程序4.6(更改为data-bs-toggle='dropdown'(引导程序5.2(。

注意：请注意，您上面提供的链接是用于引导5.0的，而不是5.2

请参阅下面的片段。

<script defer src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js'></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css'>
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class='navbar-nav mr-auto'>
<li class='nav-item dropdown'>
<a class='nav-link dropdown-toggle' href='#' id='navbarDropdownAbout' role='button' data-bs-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>About</a>
<div class='dropdown-menu' aria-labelledby='navbarDropdownAbout'>
<span class='nav-link' data-toggle='modal' data-target='#CUserAbout'>This Site</span>
<span class='nav-link' data-toggle='modal' data-target='#CUabout'>Utils</span>
<span class='nav-link' data-toggle='modal' data-target='#CUlicense'>License</span>
<a class='nav-link' href="https://wikipedia.org/" target="_blank">Wiki</a>
</div>
</li>
<li class='nav-item'> <span class='nav-link' onclick="function('charts.txt', true);">Home</span> </li>
</ul>
</div>
</div>
</nav>