如何使用TwitterBootstrapMVC创建多级导航栏

时间:2014-04-21 19:21:15

标签: asp.net-mvc twitter-bootstrap-3

我使用TwitterBootstrapMVC3

在ASP.Net MVC 5.1中定义了以下导航栏
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("Inergy Systems", "Index", "Home", null, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse">
            @using (var nav = Html.Bootstrap().Begin(new Nav().Style(NavType.NavBar)))
                {
                    @nav.Link("<span class='icon fa fa-home'></span> Home", "../home/index")
                    @nav.Link("<span class='icon fa fa-info'></span> About", "../home/about")
                    @nav.Link("<span class='icon fa fa-envelope'></span> Contact", "../home/contact")
                    using (var sm = nav.BeginDropDown(new DropDown("<span class='icon fa fa-dashboard'></span> Smart Views")))
                    {
                        @sm.Link("<span class='icon fa fa-globe'></span> 
                        @sm.Link("<span class='icon fa fa-building-o'></span> Location Dashboard", "#").Id("locationDashboardNav").Class("portalNav")
                        @sm.Link("<span class='icon fa fa-desktop'></span> Device Dashboard", "#").Id("deviceDashboardNav").Class("portalNav")
                        @sm.Link("<span class='icon fa fa-signal'></span> Latest Data", "#").Id("latestNav").Class("portalNav")
                        @sm.Link("<span class='icon fa fa-bar-chart-o'></span> Quick Charts", "#").Id("quickChartsNav").Class("portalNav")
                        @sm.Link("<span class='icon fa fa-plus-square-o'></span> Switch Control", "#").Id("switchControlNav").Class("portalNav")
                        @sm.Link("<span class='icon fa fa-th'></span> Analysis", "#").Id("analysisStandardNav").Class("portalNav")
                        @sm.Link("<span class='icon fa fa-th'></span> Advanced Analysis", "#").Id("analysisAdvancedNav").Class("portalNav")
                        @sm.Link("<span class='icon fa fa-usd'></span> Billing", "#").Id("billingNav").Class("portalNav")
                        @sm.Divider()

                        using (var dm = nav.BeginDropDown(new DropDown("<span class='icon fa fa-archive'></span> Data Management")))
                        {
                            @dm.Link("<span class='icon fa fa-group'></span> Group Management", "").Id("groupManagementNav").Class("portalNav")
                            @dm.Link("<span class='icon fa fa-user'></span> User Management", "").Id("userManagementNav").Class("portalNav")
                            @dm.Link("<span class='icon fa fa-home'></span> Location Management", "").Id("locationManagementNav").Class("portalNav")
                            @dm.Link("<span class='icon fa fa-home'></span> Device Management", "").Id("deviceManagementNav").Class("portalNav")
                            @dm.Link("<span class='icon fa fa-home'></span> Switch Management", "").Id("switchManagementNav").Class("portalNav")
                        }
                    }    
                }
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>

第一级下拉列表(sm)显示正常,但在分隔符后未显示第二级下拉列表(dm)。我做错了什么?


修改

也许Boostrap 3(Bootstrap 3 dropdown sub menu missing)中不再支持子菜单是问题所在。

0 个答案:

没有答案