Bootstrap Dropdown 不能在本地工作，但可以在 Fiddle 上工作答案

【问题标题】：Bootstrap Dropdown not working Locally but works on FiddleBootstrap Dropdown 不能在本地工作，但可以在 Fiddle 上工作
【发布时间】：2017-07-24 05:53:21
【问题描述】：

我正在构建一个MVC 5 webapp 并尝试创建一个拆分下拉按钮。我的代码在 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>

【问题讨论】：

标签： javascript jquery css asp.net-mvc twitter-bootstrap

【解决方案1】：

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

b) 检查以下任何常见问题：

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

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

【讨论】：

【解决方案2】：

导致此问题的一个非常常见的错误是两次加载 jquery 文件。我建议您在浏览器菜单中使用 View page Source 和 inspect 转到源代码并搜索 jquery 并确保在输出 html 中找不到 jquery 两次

【讨论】：

这是问题所在，我不知道它何时或如何发生的，但在我的 _layout 末尾有 Script.Render 调用。谢谢！