ASP.net MVC 4 and BootStrap _NavBar Style issue - css

Question

After changing my theme rrom default ASP.net MVC theme to BootStrap I got some styling issue in NavBar, Log off should be in same line with Hello, admin:
This's 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>
And this _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()
Log off
}
</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>
}
Html code After interpted by Chrome:
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" />
Log off
</form>
How to fix it please?

Answer 1

Your form is probably being treated as a block. Just use display: inline-block property on it and it should be fixed.
#logoutForm {
display: inline-block;
}
http://jsfiddle.net/XdQA8/

Answer 2

To solve I added the _LoginPartial.cshtml inside a DIV tag like this :
<div class="navbar-collapse collapse">
<div class="navbar-text navbar-right">
#Html.Partial("_LoginPartial")
</div>