2017-03-04 88 views
2

我正在构建MVC 5 web应用程序,并尝试创建拆分下拉按钮。我的代码工作的小提琴就好:Bootstrap下拉不工作本地,但在小提琴上工作

<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> 

jscss捆绑包括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头。正如安德烈的建议,我在想,如果我可能失去了一些东西,或在错误的顺序进口的东西:对任何错误

<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> 

回答

1

导致此问题的常见错误之一是加载jquery文件两次。 我建议你使用查看页面源代码检查在浏览器菜单中去的源代码和搜索jQuery和确保你找不到的jQuery两次在输出HTML

+0

这是问题,我不知道知道何时或如何发生,但在我的_layout结尾有Script.Render调用。谢谢! – Lance

2

一)检查控制台。

二)检查所有的这些共同的问题:

  • 你不加载jquery(.min).js
  • 你不bootstrap(.min).js
  • 你之前加载bootstrap(.min).js
  • 你不加载jquery(.min).jsbootstrap(.min).js之前没有加载tether(.min).js,而您正在使用v4。

不幸的是,如果您无法为您的错误创建一个最小的,完整的和可验证的例子(您说你不能),那就是我可以提供的所有帮助。祝你好运!

相关问题