ASP.NET 可折叠导航栏

Question

我无法将我网站上的导航栏设置为可折叠以便在移动设备上使用

这是我的导航栏的代码：

<div style="padding-bottom: 50px;">
        <header id="main-header">
            <div class="container">
                <a href="@Url.Action("Index", "Home")">

                    <img src="~/ToDo_logo1.png" id="logo" alt="logo" style="width:140px; height:50px;" />
                </a>
                <nav class="main-nav" role="navigation">
                    <ul>
                        @if (User.IsInRole("Admin"))
                        {

                            <li class="@(ViewBag.Linktext == "Venues" ? "current" : "")">@Html.ActionLink("Venues", "Index", "Venues")</li>
                            <li class="@(ViewBag.Linktext == "Events" ? "current" : "")">@Html.ActionLink("Events", "Index", "Events")</li>
                            <li class="@(ViewBag.Linktext == "Bands" ? "current" : "")">@Html.ActionLink("Bands", "Index", "Bands")</li>
                            <li class="@(ViewBag.Linktext == "Admin" ? "current" : "")">@Html.ActionLink("Admin", "Admin", "Home")</li>

                            @Html.Partial("_LoginPartial")
                        }

                        else
                        {
                            <li class="@(ViewBag.Linktext == "Venues" ? "current" : "")">@Html.ActionLink("Venues", "Index", "Venues")</li>
                            <li class="@(ViewBag.Linktext == "Events" ? "current" : "")">@Html.ActionLink("Events", "Index", "Events")</li>
                            <li class="@(ViewBag.Linktext == "Bands" ? "current" : "")">@Html.ActionLink("Bands", "Index", "Bands")</li>

                            <li>@Html.Partial("_LoginPartial")</li>
                        }
                    </ul>
                </nav>
            </div>
        </header>
    </div>

使用此代码，导航链接消失，但我无法让折叠导航栏图标与其中的链接一起出现。

如果您需要查看更多代码，请询问

Answer 1

使用 Bootstrap 3 和 MVC，以下将为您提供可折叠的工具栏和一些经过用户身份验证的测试，以显示您可以删除/玩的东西和其他东西。

<div class="navbar navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle navbar-inverse" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar navbar-inverse"></span>
                    <span class="icon-bar navbar-inverse"></span>
                    <span class="icon-bar navbar-inverse"></span>
                </button>
                @Html.ActionLink("MY SITE NAME ", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" id="dropdownCommonMenu" data-toggle="dropdown">Content</a>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownCommonMenu">
                            @if (Request.IsAuthenticated)
                            {

                                if (User.IsInRole("YourRoleToCheck"))
                                {
                                    <li role="menuitem" class="nav-header text-info">Admin Tools</li>
                                    <li role="menuitem">@Html.ActionLink("Customers", "Index", "AspNetUsers")</li>
                                    <li role="menuitem">@Html.ActionLink("Suasages", "Index", "Sausages")</li>
                                    <li role="menuitem">@Html.ActionLink("Spiders", "Index", "Spiders")</li>
                                    <li role="menuitem">@Html.ActionLink("Reports", "Index", "Reports")</li>
                                    <li role="menuitem" class="divider"></li>
                                }
                                if (User.IsInRole("AnotherRoleTest"))
                                {
                                    <li role="menuitem" class="nav-header text-info">Managers Only</li>
                                    <li role="menuitem">@Html.ActionLink("Users", "ManageIndex", "AspNetUsers")</li>
                                    <li role="menuitem" class="divider"></li>
                                }
                                if (User.IsInRole("AnotherRoleToTest"))
                                {
                                    <li role="menuitem" class="nav-header text-info">Supervisor Stuff</li>
                                    <li role="menuitem">@Html.ActionLink("Technician", "TechnicianIndex", "Technician")</li>
                                }
                            }
                            else
                            {
                                <li role="menuitem" class="nav-header text-danger">You must be Logged in</li>
                            }
                        </ul>
                    </li>                    
                    <li>@Html.ActionLink("Help", "Contact", "Home")</li>
                    @*<li>@Html.ActionLink("About", "About", "Home")</li>*@
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>