导航栏（折叠）不起作用 Bootstrap 5
Posted
技术标签:
【中文标题】导航栏（折叠）不起作用 Bootstrap 5【英文标题】：navbar (Collapse) doesn't work Bootstrap 5 【发布时间】：2021-10-19 15:46:58 【问题描述】：我有这个导航栏菜单，它可以在 VS 代码中工作，但不能在 VS razor 布局中工作。 我检查了版本、文件路径、ide，尽管它不起作用。 有Scripts链接：
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/DataTable/datatables.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false)
html 导航栏：
<!-- Bootstrap 5 Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
<div class=" w-100">
<div class="px-5">
<a class="navbar-brand float-right" href="#">
<img src="~/images/logo.png" class="navbar-logo">
</a>
<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 light"></span>
</button>
<div class="collapse navbar-collapse float-left " id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-3 mb-lg-0 ">
<li class="nav-item">
<a class="nav-link navbar-link active" href="#">المباني</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-link" href="#">المستخدمين</a>
</li>
<li class="border-bottom d-fixed d-lg-none m-2"></li>
</ul>
<div>
<button class="bg-white btn-logout btn me-5 d-flex justify-content-center align-items-center">
<img src="~/images/logout.png" class="logout-logo">
</button>
</div>
</div>
</div>
</div>
</nav>
导航栏的CSS：
/*navbar*/
.navbar-logo
width: 120px;
.nav-icons
width: 25px;
.nav-link
font-weight: bold;
text-decoration-color: #1D4D4F;
.logout-logo
width: 25px;
.btn-logout
height: 45px;
width: 45px;
.title
font-weight: bold;
color: #1D4D4F;
font-size: 3rem;
.card-w
width: 260px;
除此之外，我在浏览器的控制台中没有发现任何错误。这个问题怎么解决？？我不知道MVC中的View是否有任何问题。
【问题讨论】：
【参考方案1】：大家好，问题已解决，感谢您的回答。问题是因为我有 2 个 Bootstraps 文件夹，一个是 4.5，第二个是 5.02，我使用的是 5.02，但 VS 找不到这个库。所以我要做的是删除所有文件夹并重新复制粘贴我的 Bootstrap 文件夹，而不是安装包。然后就这样解决了。
【讨论】：
【参考方案2】：它正在崩溃。 您包含 bootstrap.bundle.min.js 将其更改为 bootstrap.min.js。也许这会解决它。
/*navbar*/
.navbar-logo
width: 120px;
.nav-icons
width: 25px;
.nav-link
font-weight: bold;
text-decoration-color: #1D4D4F;
.logout-logo
width: 25px;
.btn-logout
height: 45px;
width: 45px;
.title
font-weight: bold;
color: #1D4D4F;
font-size: 3rem;
.card-w
width: 260px;
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Bootstrap 5 Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
<div class=" w-100">
<div class="px-5">
<a class="navbar-brand float-right" href="#">
<img src="http://placehold.jp/100x100.png" class="navbar-logo">
</a>
<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 light"></span>
</button>
<div class="collapse navbar-collapse float-left " id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-3 mb-lg-0 ">
<li class="nav-item">
<a class="nav-link navbar-link active" href="#">المباني</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-link" href="#">المستخدمين</a>
</li>
<li class="border-bottom d-fixed d-lg-none m-2"></li>
</ul>
<div>
<button class="bg-white btn-logout btn me-5 d-flex justify-content-center align-items-center">
<img src="" class="logout-logo">
</button>
</div>
</div>
</div>
</div>
</nav>【讨论】：
【参考方案3】：您尝试下载最新的引导程序：
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/bootstrap/js/bootstrap.js"></script>
<script src="~/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="~/bootstrap/js/bootstrap.min.js"></script>
@*<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>*@
<script src="~/js/site.js" asp-append-version="true"></script>
@RenderSection("Scripts", required: false)
查看：
@section Scripts
<link href="~/css/test.css" rel="stylesheet" />
<!-- Bootstrap 5 Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
<div class=" w-100">
<div class="px-5">
<a class="navbar-brand float-right" href="#">
<img src="~/images/test1.png" class="navbar-logo">
</a>
<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 light"></span>
</button>
<div class="collapse navbar-collapse float-left " id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-3 mb-lg-0 ">
<li class="nav-item">
<a class="nav-link navbar-link active" href="#">المباني</a>
</li>
<li class="nav-item">
<a class="nav-link navbar-link" href="#">المستخدمين</a>
</li>
<li class="border-bottom d-fixed d-lg-none m-2"></li>
</ul>
<div>
<button class="bg-white btn-logout btn me-5 d-flex justify-content-center align-items-center">
<img src="~/images/test2.png" class="logout-logo">
</button>
</div>
</div>
</div>
</div>
</nav>
结果：
【讨论】：
以上是关于导航栏（折叠）不起作用 Bootstrap 5的主要内容，如果未能解决你的问题，请参考以下文章
导航栏折叠在 Rails 5/Bootstrap 3 上不起作用
使用 AngularJS 的 Twitter Bootstrap 导航栏 - 折叠不起作用