Question

我已将我的bootstrap 3模板更新为bootstrap 4版本。现在的问题是我的导航标题中的子菜单（下拉列表）在引导程序4中不起作用并且它在引导程序3中有效。如何在Bootstrap 4中添加服务列表的子菜单？这是我的代码，

<a class='navbar-brand' href='#'>Start Bootstrap</a>
<button class='navbar-toggler' type='button' data-toggle='collapse' data-target='#navbarResponsive' aria-controls='navbarResponsive' aria-expanded='false' aria-label='Toggle navigation'>
  <span class='navbar-toggler-icon'></span>
</button>
<div class='collapse navbar-collapse' id='navbarResponsive'>
  <ul class='navbar-nav ml-auto'>
    <li class='nav-item active'>
      <a class='nav-link' href='#'>Home
        <span class='sr-only'>(current)</span>
      </a>
    </li>
    <li class='nav-item'>
      <a class='nav-link' href='#'>About</a>
    </li>
    <li class='nav-item'>
      <a class='nav-link' href='#'>Services</a>
    </li>

    <li class='nav-item'>
      <a class='nav-link' href='#'>Contact</a>
    </li>
  </ul>
</div>

Answer 1

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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>

Answer 2

@Dinesh Kumar，希望这可以帮到你。我已经在codeply project中添加了工作代码。它会使用您的代码并在您的联系人列表项后添加以下标记：

...
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <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>
      </li>
...

如何在Bootstrap 4中添加下拉列表？

2 个答案: