0

您好，我尝试使用 UI-Bootstrap 和 bootswatch 模板设置 Angular 应用程序。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，所以不需要它，所以我没有在列表中。（我确实对其进行了测试并添加了它，但结果相同）。

提前致谢

4

0 回答 0