Question

您好我尝试使用UI-Bootstrap和bootswatch模板设置角度应用。 bootswatch模板正在整个网站上应用，但是当我尝试设置下拉菜单，手风琴或导航崩溃时似乎没有任何效果。导航折叠与导航一起使用，只要折叠按钮，但点击按钮什么都不做，没有下拉等。我在Chrome开发工具中没有收到任何错误，我可以看到所有请求的脚本和CSS都被加载在页面中。虽然这是一个SPA我将它包装在MVC 4网站中。这是我到目前为止基础cshtml模板的html。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <title>@ViewBag.Title</title>

    <!--Remove for bundles on publish-->
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    @if (IsSectionDefined("AdditionalHeadContent"))
    {
        @RenderSection("AdditionalHeadContent", required: false)
    }
    <style type="text/css">
        .bs-spacer{margin:40px;}
    </style>
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="bs-spacer">  
            <nav role="navigation" class="navbar navbar-default">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="#" class="navbar-brand">Brand</a>

                </div>
                <!-- Collection of nav links and other content for toggling -->
                <div id="navbarCollapse" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                    </ul>
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                            <a id="itemActionMenu" role="presentation" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="itemActionMenu">
                                <li role="presentation"><a role="menuitem" tabindex="-1">Action 1</a></li>
                                <li role="presentation"><a role="menuitem" tabindex="-1">Action 2</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Login</a></li>
                    </ul>
                </div>
            </nav>
            @RenderBody()

    </div>
    <!--Remove for bundles on publish-->

    @Scripts.Render("~/Scripts/angular.min.js")
    @Scripts.Render("~/Scripts/angular-ui/ui-bootstrap-tpls.min.js")
    @Scripts.Render("~/Scripts/angular-animate.min.js")
    @RenderSection("scripts", required: false)
</body>
</html>

有关我可能遗失的任何建议吗？由于我不需要使用UI-Bootstrap jquery，所以我没有在列表中使用它。（我测试了它并添加它但结果相同）。

提前致谢

下拉菜单不适用于UI-Bootstrap和bootswatch模板

0 个答案: