Vue 3引导程序5导航栏未切换回最小化

Question

Im在vue 3上使用bootstrap 5，类似于执行以下

npm install bootstrap

并像一样在main.js中导入

import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap"
import "bootstrap/dist/js/bootstrap.js"

现在在我的组件中，我有一个导航

<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
<div class="container container-fluid">
<a class="navbar-brand" href="/">Title</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navContent" aria-controls="navContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/products">Products</a>
</li>
<li v-if="isAuth" class="nav-item float-end ms-md-auto">
<a class="nav-link active" v-on:click="showLogoutDialog">Logout</a>                     
</li>
</ul>
</div>
</div>
</nav>

现在的问题是-我可以切换它来显示菜单，但不能切换回来。在查看inspect工具时，我可以看到崩溃的类被应用，但立即消失。

感谢您提前提供的任何帮助，如果需要其他帮助，请告诉我。

Answer 1

Eh。。所以问题是，如果bootstrap被包含两次，这些类可能无法正确应用。所以我不得不删除boosrap.js导入。现在它运行良好。

Answer 2

我也遇到了同样的问题。请用双引号到单引号运行您的项目编辑代码。

您的代码：导入"bootstrap/dist/css/bootstrap.min.css"；

导入"；引导程序"；导入"；bootstrap/dist/js/bootstrap.js"；

我的测试代码：

导入'bootstrap/dist/css/bootstrap.min.css'

导入'bootstrap/dist/js/bootstrap.js'

导入"；引导程序删除此行并再次运行服务器并检查