我的引导程序下拉菜单无法显示下拉菜单

时间:2020-05-25 16:42:18

标签: html css bootstrap-4

我已经在HTML文件中添加了以下代码来实现bootstrap下拉菜单,但是我看不到该下拉列表。

HTML文件

      <div class="tools text-muted d-flex justify-content-around mr-4">
        <div class="pr-3 border-right">Filter</div>
        <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Filter
          </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>
        <fa-icon class="pr-3" [icon]="faChevronDown"></fa-icon>
      </div>
      <button type="button" class="btn btn-warning">Register</button>
    </div>

我也已在angular.json样式数组中添加了引导程序:

 "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "src/assets/js/custom.js"
            ]

我不愿意在这里看到下拉菜单,我可以看到按钮,但看不到下拉菜单。

2 个答案:

答案 0 :(得分:0)

当我简单地将CDN文件链接添加到HTML文档(不使用任何其他内容)时,它对我有用

答案 1 :(得分:0)

引导程序的下拉菜单需要Popper.js。我不知道您是否已将其添加到package.json的依赖项中,但如果没有添加,请在其中添加它,或通过npm install添加它。您可以看看here。如果您已安装Popper.js,则angular.json应该如下所示:

lambda