【发布时间】：2020-02-05 03:37:44
【问题描述】：
我正在使用Bootstrap css 并有一个“商店”下拉菜单，单击它时，列表中的内容应该会像在 Bootstrap 文档中一样显示：
https://getbootstrap.com/docs/4.0/components/dropdowns/
谁能告诉我这出了什么问题？据我所知，这应该可以在不包含 Bootstrap javascript 的情况下工作。这是一个示例 jsfiddle：
https://jsfiddle.net/Le43a8o2/
<nav class='navbar navbar-light bg-light'>
<a class='navbar-brand' [routerLink]="['/']">{{pageTitle}}</a>
<ul class="nav nav-pills justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Stores
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
</li>
</ul>
</nav>
【问题讨论】：
-
包含的js可以用吗？
-
它在文档中字面上说 bs js 需要它才能运行：“它们与包含的 Bootstrap 下拉 JavaScript 插件交互。它们是通过单击而不是悬停来切换的；这个是一个有意的设计决策。下拉菜单是基于第三方库 Popper.js 构建的，该库提供动态定位和视口检测。一定要在 Bootstrap 的 JavaScript 之前包含 popper.min.js 或使用 bootstrap.bundle.min.js / bootstrap .bundle.js 包含 Popper.js。Popper.js 不用于在导航栏中定位下拉菜单，尽管作为动态定位..."
标签： twitter-bootstrap bootstrap-4