Bootstrap Dropdown 在本地不起作用，但在 Fiddle 上起作用

Question

我正在构建一个MVC 5网络应用程序并尝试创建一个拆分下拉按钮。我的代码在 Fiddle 上运行得很好：

<div class="btn-group pull-right">
     <button id="ClearRules" type="button" class="btn btn-xs btn-default" title="Clear all of the rules"><span class="glyphicon glyphicon-remove"></span> Clear</button>
     <button id="AddRule" type="button" class="btn btn-xs btn-default" title="Add a new rule"><span class="glyphicon glyphicon-plus"></span> Add</button>
     <button id="AddRules" class="btn btn-xs btn-default dropdown-toggle" title="Add several rules" data-toggle="dropdown">
         <span class="caret"></span>
         <span class="sr-only">Toggle Dropdown</span>
     </button>
     <ul class="dropdown-menu">
         <li><a href="#">5</a></li>
         <li><a href="#">10</a></li>
         <li><a href="#">15</a></li>
         <li><a href="#">20</a></li>
     </ul>
</div>

我的js和css捆绑包包括bootstrap：

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/bootstrap-toggle.js",
                  "~/Scripts/respond.js",
                  "~/Scripts/bootstrap-dialog.js"));

bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css",
                  "~/Content/bootstrap-toggle.css",
                  "~/Content/bootstrap-dialog.css"));

我什至从网站上复制了示例Boostrap并将其放入我的代码中，但无济于事。该按钮显示正确，但单击该按钮时下拉列表不会展开。

编辑：

这是我的脚本和样式导入，与呈现的 html 头部中显示的完全相同。正如安德烈（Andrei）的建议，我想知道我是否可能遗漏了某些内容或以错误的顺序导入了某些内容：

<script src="/Scripts/jquery-3.1.1.js"></script>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/bootstrap-toggle.css" rel="stylesheet"/>
<link href="/Content/bootstrap-dialog.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.8.3.js"></script>
<script src="/Scripts/Tether/Tether.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/bootstrap-toggle.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/bootstrap-dialog.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>    
<script src="/Scripts/TheRandomizer.ItemListMaintenance.js"></script>

Answer 1

a) 检查控制台是否有任何错误。

b) 检查是否存在以下任何常见问题：

• 你没有加载jquery(.min).js
• 你没有加载bootstrap(.min).js
• jquery(.min).js你之前没有加载过bootstrap(.min).js
• tether(.min).js您之前没有加载过bootstrap(.min).js并且您使用的是 v4。

不幸的是，如果您无法创建一个最小的、完整的和可验证的错误示例（您说您不能），那么这就是我能提供的所有帮助。祝你好运！