由于某些问题，Bootstrap 下拉菜单未打开答案

【问题标题】：Bootstrap dropdown not opening due to some issue由于某些问题，Bootstrap 下拉菜单未打开
【发布时间】：2018-01-12 08:39:41
【问题描述】：

我正在尝试使用引导下拉菜单，但它没有打开。下拉菜单代码如下：

<div class="btn-group">
  <button type="button" class="btn btn-default">
    <div class="checkbox" style="margin: 0;">
        <label>
            <input type="checkbox"
                   name="all"
                   [(ngModel)]="selectedAll"
                   (change)="selectAll($event);"/>
        </label>
    </div>
 </button>
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span><span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">All</a></li>
    <li><a href="#">None</a></li>
    <li><a href="#">Read</a></li>
    <li><a href="#">Unread</a></li>
    <li><a href="#">Starred</a></li>
    <li><a href="#">Unstarred</a></li>
  </ul>
</div>

我已经包含了所有必要的文件并且它们都可用。

【问题讨论】：

不工作是什么意思？您在控制台中收到错误消息吗？
@AmrElgarhy 没有错误，只是没有打开，更改了标题
你添加了 Jquery 库吗？
@OvidiuUnguru 是的，它已添加
this example 使用 bootstrap 4 4.0 b3 和 js bundle + jquery 3.2.1 并且可以正常工作。您要么添加了错误的版本，要么没有添加任何内容

标签： jquery css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

基于bootstrap dropdown demos 你应该把你的菜单放在一个有dropdown类的容器中，如本例所示：

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

【讨论】：