html - 如何在导航栏中添加下拉菜单？

Question

我想知道如何在“社交媒体”类所在的导航栏中添加下拉菜单。这是我的代码：

    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Social Media</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav

Answer 1

<div class="navbar-nav">
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
  <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>

  <a class="nav-item nav-link" href="#">Social Media</a>

  <a class="nav-item nav-link" href="#">Pricing</a>

  <a class="nav-item nav-link disabled" href="#">Disabled</a>
  </div>
</div>
</div>

您必须做几件事 - 将您的项目包装在 2 个 div 标签中。一个是类下拉菜单。这个包含您单击以显示实际下拉列表的按钮。另一个 div 带有类下拉菜单。此 div 包含您的项目。使用较新的引导程序，您可以使用按钮而不是链接项。