使用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的不同预编译版本,我似乎无法想到控制各种菜单宽度的断点宽度的方法。
有什么建议吗?