Bootstrap 導航欄崩潰不適用於捆綁的引導程序文件

Question

我想在我的 asp.net 應用程序的視圖中包含一個從引導程序示例頁面復制的導航欄。 導航欄如下，

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
   <a class="navbar-brand" asp-controller="Home" asp-action="Index">Bata</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
   </button>
   <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
         <li class="nav-item active">
            <a class="nav-link" asp-controller="Home" asp-action="Index">Home</a>
         </li>
         @if (signInManager.IsSignedIn(User) && User.IsInRole("Admin"))
         {
         <li class="nav-item">
            <a class="nav-link" asp-action="ListUsers" asp-controller="Admin">User Management</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" asp-action="ListPurchases" asp-controller="Purchase">Purchases</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" asp-action="ListCurrencies" asp-controller="Admin">Currency Management</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" asp-action="List" asp-controller="unitItem">Inventory Management</a>
         </li>
         }
         <li class="nav-item">
            <a class="nav-link" asp-controller="Contact" action="Index">Contact</a>
         </li>
      </ul>
      @await Component.InvokeAsync("CheckoutSummary")
      @await Html.PartialAsync("LoginPartial")
      <form class="form-inline mt-2 mt-md-0">
         <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
         <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
   </div>
</nav> 

導航欄顯示正確，但單擊按鈕時不會折疊。 該按鈕正在獲取您可以判斷的點擊事件，因為該按鈕變為橙色。

我已經像這樣捆綁了我的引導程序和 js 文件，並將供應商文件包含在視圖中。

  {
    "outputFileName": "wwwroot/vendor.min.css",
    "inputFiles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "node_modules/bootstrap/dist/css/bootstrap.min.css.map",
      "node_modules/bootstrap/dist/css/bootstrap.css.map",
    ],
    "minify": { "enabled": true }
  },
  {
    "outputFileName": "wwwroot/vendor.min.js",
    "inputFiles": [
      "node_modules/popper.js/dist/umd/popper.min.js",
      "node_modules/bootstrap/dist/js/bootstrap.min.js",
      "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
      "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js.map",
      "node_modules/jquery/dist/jquery.min.js"
    ],
    "minify": { "enabled": false }
  }
]

為什么折疊按鈕不起作用，我可能會遺漏什么？

Answer 1

聽起來您正在嘗試復制導航欄頁面上最后一個示例的功能。 如果是這樣，看起來你錯過了他們的一些課程。 嘗試包括他們。

這是他們示例中的代碼。 為了進行測試，您可以嘗試從他們的示例開始，然后慢慢將您想要的內容納入導航欄。 這將幫助您弄清楚您缺少什么。

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h4 class="text-white">Collapsed content</h4>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

https://getbootstrap.com/docs/4.0/components/navbar/#external-content