Css ASP.net MVC 4和引导程序_导航栏样式问题

将我的主题rrom default ASP.net MVC主题更改为BootStrap后，我在导航栏中遇到了一些样式问题，注销应该与你好，管理员一致：

这是my_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>

@helper ActiveItem（字符串actionName、字符串controllerName、字符串areaName）
{
如果（ViewContext.RoutedData.Values[“action”].ToString（）==actionName&&
ViewContext.RouteData.Values[“controller”].ToString（）==controllerName&&
（ViewContext.RoutedData.DataTokens[“area”]==null | | ViewContext.RoutedData.DataTokens[“area”].ToString（）==areaName））
{
@：活动
}
}
切换导航

@Html.Partial（“_LoginPartial”）


@Html.ActionLink（“Home”，“Index”，“Home”）
@Html.ActionLink（“关于”，“关于”，“主页”）
@Html.ActionLink（“联系人”、“联系人”、“主页”）

这个_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>
}

@if（Request.IsAuthenticated）{
您好，@Html.ActionLink（User.Identity.Name，“Manage”，“Account”，routeValue:null，htmlAttributes:new{@class=“username”，title=“Manage”}）！
@使用（Html.BeginForm（“注销”、“帐户”、FormMethod.Post、新{id=“logoutForm”}））{
@Html.AntiForgeryToken（）
}
}
否则{
@ActionLink（“Register”、“Register”、“Account”、routeValue:null、htmlAttributes:new{id=“registerLink”}）
|@Html.ActionLink（“登录”、“登录”、“帐户”、路由值：null、htmlAttributes:new{id=“loginLink”}）
}

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> 

你好！

---

请如何修复它？

您的表单可能被视为一个块。只需对其使用

display:inline block

属性，它应该是固定的

#logoutForm {
    display: inline-block;
}

---

为了解决问题，我在DIV标记中添加了

\u LoginPartial.cshtml

，如下所示：

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

@Html.Partial（“_LoginPartial”）

如果您只有在用户登录时才遇到此问题，则可能是因为您将注销包装在表单中，并将其视为块。顺便说一句，谁以表单的形式完成注销功能PYeah注销采用单独的形式，并通过

WebSecurity.Logout（）实现那么你能在ChromeDevTools中检查这个表单是否被视为块吗？我已经更新了我的post check，把它放在哪里？在哪个文件中？@Chlebta你可以像这样在线完成<代码>@使用（Html.BeginForm（“注销”，“帐户”，FormMethod.Post，new{id=“logoutForm”，style=“display:inline block；”“}））

在Html代码中，我得到了这个

，但它不能解决相同的问题。