Bootstrap сворачивание панели навигации не работает с объединенными bootstrap файлами - PullRequest
Новая
       116

Bootstrap сворачивание панели навигации не работает с объединенными bootstrap файлами

0 голосов
/ 04 августа 2020

Я хочу включить панель навигации, которую я скопировал со страницы примера bootstrap, в представления моего приложения 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>

Панель навигации отображается правильно, но не разрушается при нажатии кнопки. Кнопка получает событие щелчка, которое вы можете определить, поскольку кнопка становится оранжевой.

Я объединил свои файлы bootstrap и 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 }
  }
]

Могу я чего-то упустить, почему кнопка свертывания не работает?

1 Ответ

0 голосов
/ 04 августа 2020

Похоже, вы пытаетесь скопировать функциональность последнего примера на странице навигационной панели. Если это так, похоже, вам не хватает некоторых из их классов. попробуйте включить их.

Вот код из их примера. Для тестирования вы можете попробовать начать с их примера и постепенно добавлять то, что вы хотите, в панель навигации. Это поможет вам выяснить, что вам не хватает. 

<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

...