ASP.net MVC 4 和 BootStrap _NavBar 样式问题答案

【问题标题】：ASP.net MVC 4 and BootStrap _NavBar Style issueASP.net MVC 4 和 BootStrap _NavBar 样式问题
【发布时间】：2014-06-12 06:53:10
【问题描述】：

将我的主题 rrom 默认 ASP.net MVC 主题更改为 BootStrap 后，我在 NavBar 中遇到了一些样式问题，Log off 应该与 Hello, admin 保持一致：

这是我的 _NavBar.cshtml ：

    @helper ActiveItem(string actionName, string controllerName, string areaName)
{
    if (ViewContext.RouteData.Values["action"].ToString() == actionName &&
            ViewContext.RouteData.Values["controller"].ToString() == controllerName &&
            (ViewContext.RouteData.DataTokens["area"] == null || ViewContext.RouteData.DataTokens["area"].ToString() == areaName))
    {
        @:active
    }
}

<div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!-- Navbar header and form mobile version -->
        <div class="navbar-header">
                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <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="#">PFE</a>
        </div>
        <!-- Menu Link list and Deconnexion button -->
        <div class="navbar-collapse collapse">
            <p class="navbar-text navbar-right">
                        @Html.Partial("_LoginPartial")
            </p>
            <ul class="nav navbar-nav">
                <li class="@ActiveItem("Index", "Home", null)">@Html.ActionLink("Home", "Index", "Home")</li>
                <li class="@ActiveItem("About", "Home", null)">@Html.ActionLink("About", "About", "Home")</li>
                <li class="@ActiveItem("Contact", "Home", null)">@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>
        </div>
    </div>
</div>

还有这个 _LoginPartial.cshtml ：

 @if (Request.IsAuthenticated) {
  <text>
  Hello, @Html.ActionLink(User.Identity.Name, "Manage", "Account", routeValues: null, htmlAttributes: new { @class = "username", title = "Manage" })!
         @using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" })) {
         @Html.AntiForgeryToken()
          <a href="javascript:document.getElementById('logoutForm').submit()">Log off</a>
        }
  </text>
}
else {
  <text>
  @Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })
  | @Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })
  </text>
}

被Chrome解析后的HTML代码：

 Hello, <a class="username" href="/Account/Manage" title="Manage">admin</a>!
    <form action="/Account/LogOff" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="FouTIIlrUNMPSCuPnaUtLA-zm5Q5ya2-24OFPZF5EWKECyyN7l4F1SOIClnfUU_2CzEbq6tQSAJ_EDKbLJLA6Hzc4Gc_OSTWbHfXmSdwV8E1" />     
     <a href="javascript:document.getElementById('logoutForm').submit()">Log off</a>
    </form>

请问如何解决？

【问题讨论】：

如果您仅在用户登录时出现此问题，则可能是因为您将 LogOff 包装在表单中并将其视为块。顺便说一句，谁将注销功能作为表单呢？ :P
是的，注销是单独的形式，它是用WebSecurity.Logout();实现的
那么您能否在 ChromeDevTools 中检查该表单实际上是否被视为块？
我已经更新了我的帖子检查它

标签： css asp.net-mvc asp.net-mvc-4 twitter-bootstrap razor

【解决方案1】：

为了解决这个问题，我在 DIV 标记中添加了_LoginPartial.cshtml，如下所示：

<div class="navbar-collapse collapse">
        <div class="navbar-text navbar-right">
                    @Html.Partial("_LoginPartial")
        </div>

【讨论】：

【解决方案2】：

您的表单可能被视为一个块。只需在其上使用display: inline-block 属性，它应该是固定的。

#logoutForm {
    display: inline-block;
}

http://jsfiddle.net/XdQA8/

【讨论】：

放在哪里？在哪个文件中？
@Chlebta 你可以像这样内联。 @using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", style="display: inline-block;" }))
在 HTML 代码中我得到了这个<form action="/Account/LogOff" id="logoutForm" method="post" style="display: inline-block;"> 但它不能解决同样的问题。