Bootstrap 3变量菜单断点

时间:2014-04-12 15:06:32

标签: twitter-bootstrap-3 breakpoints navbar collapse

使用bootstrap 3我有一个看似常见的情况。我的菜单取决于谁登录如下:

<!-- Starts with vanilla Bootstrap navbar classes -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" 
                   data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>
        <!-- This is the variable sized menu that gets generated -->
        <!--   by the server depending on the user's role.  I've -->
        <!--   cut it down to two roles for simplicity but there -->
        <!--   will be four roles that each contain various menu -->
        <!--   items.                                            -->
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                @if (Request.IsAuthenticated)
                {
                    if (User.IsInRole("PowerUser"))
                    {
                        <li>@Html.ActionLink("Home", "Index", "Home")</li>
                        <li>@Html.ActionLink("Browse", "Browse", "Browser")</li>
                        <li>@Html.ActionLink("Manage", "Manage", "Manager")</li>
                        <li>@Html.ActionLink("Upload", "Upload", "Uploader")</li>
                        <li>@Html.ActionLink("About", "About", "Home")</li>
                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    } // elseif User.IsInRole: Member, Administrator, etc.
                }
                else
                {
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                }
            </ul>
            <!-- Now on the right side of the menu we have registration/login -->
            <!-- This wraps (not collapses!) when logged in as PowerUser and -->
            <!--   with the breakpoint set at 1000px in variables.less -->
            <!-- This collapses perfectly with the user not logged in (i.e. guest) -->
            <ul class="nav navbar-nav navbar-right">
                <li class="@ActiveItem("Register", "Account", null)">
                    @Html.ActionLink("Register", "Register", "Account", 
                        new { ReturnUrl = this.Request.Url.AbsolutePath }, 
                        new { id = "registerLink", 
                              data_dialog_title = "Registration" })
                </li>
                <li class="@ActiveItem("Login", "Account", null)">
                    @Html.ActionLink("Login", "Login", "Account", 
                        new { ReturnUrl = this.Request.Url.AbsolutePath }, 
                        new { id = "loginLink", 
                              data_dialog_title = "Identification" })
                </li>
            </ul>
        </div>
        <!-- .nav-collapse -->
    </div>
</div>

我通过使用@ grid-float-breakpoint值成功地静态更改断点(折叠点)。但是我无法根据用户的角色动态地了解如何动态操作。我知道,在服务器上,谁登录了,但没有链接bootstrap CSS的不同预编译版本,我似乎无法想到控制各种菜单宽度的断点宽度的方法。

有什么建议吗?

0 个答案:

没有答案