导航栏（折叠）不起作用 Bootstrap 5

Question

我有这个导航栏菜单，它在 VS 代码中工作但在 VS razor 布局中不工作。 我检查了版本、文件路径、ide，但它不起作用。 有脚本链接：

<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" alt="" 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" alt="" 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有没有问题

Answer 1

它正在崩溃。
您包括 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" alt="" 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="" alt="" class="logout-logo">
           </button>
        </div>
      </div>
    </div>
  </div>
</nav>

Answer 2

您尝试下载最新的bootstrap：

 <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" alt="" 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" alt="" class="logout-logo">
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </nav>

结果：

Answer 3

大家好，问题已解决，感谢您的回答。问题是因为我有 2 个 Bootstraps 文件夹，一个是 4.5，第二个是 5.02，我使用的是 5.02，但 VS 找不到这个库。所以我所做的是删除所有文件夹并重新复制粘贴我的 Bootstrap 文件夹，而不是安装包。然后就这样解决了

导航栏（折叠）不起作用 Bootstrap 5

navbar (Collapse) doesn't work Bootstrap 5

jquery

css

asp.net-core-mvc

navbar

collapse