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