Bootstrap 4.5 Раскрывающееся меню двойной навигации

Question

Bootstrap 4.5 Двойное раскрывающееся меню навигации В шаблоне не используются теги

для подменю.

Я пытаюсь заставить работать подменю «Отчеты». Спасибо за любые предложения.

https://codepen.io/hrosado/pen/gOrbWrq

<div class="nav-scroller bg-white shadow-sm">
  <nav id="nav-list" class="nav nav-underline">
    <a class="nav-link" href="~/Dashboard/Index"> Dashboard </a>
    <a class="nav-link" href="~/Training/MyTraining"> My Training <span class="badge badge-pill bg-light align-text-bottom">[27]</span></a>
    <a class="nav-link" href="~/Training/Index"> Training Center</a>
    <a class="nav-link" href="~/SkillsCerts/Index"> Skills &amp; Certs</a>
    <a class="nav-link" href="~/Reports/Index"> Reports</a>
    <!-- Bootstrap Dropdown not working  -->
    <div class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="dropdownB" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Reports</a>
      <div class="dropdown-menu" aria-labelledby="dropdown">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </div>
  </nav>
</div>

Answer 1

У меня все работает, я думаю, вы могли не включить все необходимые bootstrap ресурсы. Посмотрите на мою ручку: https://codepen.io/saiprasadnayak/pen/MWyYEYy Надеюсь, это решит вашу проблему

<div class="nav-scroller bg-white shadow-sm">
<nav id="nav-list" class="nav nav-underline">
<a class="nav-link" href="~/Dashboard/Index"> Dashboard </a>
<a class="nav-link" href="~/Training/MyTraining"> My Training <span class="badge badge-pill bg-light align-text-bottom">[27]</span></a>
<a class="nav-link" href="~/Training/Index"> Training Center</a>
<a class="nav-link" href="~/SkillsCerts/Index"> Skills &amp; Certs</a>
<a class="nav-link" href="~/Reports/Index"> Reports</a>
<div class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdownB" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Reports</a>
<div class="dropdown-menu" aria-labelledby="dropdown">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</nav>
</div>