Question

我猜这对大多数人来说都是一个容易出问题的问题。我从bootstrap网站复制了标准模板，但是当我点击它时，导航栏中的下拉菜单就没有了。有人能看出原因吗？

<nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
  <a
    class="navbar-brand"
    routerLinkActive="active current"
    routerLink="/">
    Home
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a
          class="nav-link"
          routerLinkActive="active current"
          routerLink="/shopping-cart">
          Shopping Cart
          <span
            class="caret">
          </span>
        </a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">User</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01">
          <a class="dropdown-item" href="#">My orders</a>
          <a class="dropdown-item" href="#">Manage Orders</a>
          <a class="dropdown-item" href="#">Manage Products</a>
          <a class="dropdown-item" href="#">Log Out</a>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-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>

Answer 1

此问题很可能是由于缺少必要的脚本标记引起的。在Bootstrap's website上，它在 JS 部分下面说：

我们的许多组件都需要使用JavaScript才能运行。

此外，还有一个初学者模板，可以与您尝试使用的导航栏组件一起使用。

这为正确使用bootstrap提供了所有必要的参考。

请告诉我这是否有帮助！

Answer 2

正如GTown-Coder所提到的，你需要包含jquery脚本并确保引导程序......

有两种方法。为简单起见，我更喜欢以下内容

在的index.html中（标题也应该起作用，如果最后没有将脚本包含在主体中）你必须从Bootstrap添加4行（LINK [下载bootstrap 4页））

然后您的下拉列表应该有效。

其他方式是安装（通过npm，LINK）bootstrap，jquery，tether，popperjs并将脚本路径添加到.angular-cli.json - ＆gt;如果缺少一些依赖性，这可能会很棘手。

还有问题，请告诉我们！

Bootstrap下拉列表未打开

2 个答案: