einen Knopf auf der rechten Seite in einer Navigationsleiste ausrichten einen Rand auf der rechten Seite

Question

Ich bin mit Bootstrap für das Styling eine Website und alles funktioniert direkt für das Login-Formular zu verlassen, der in einem navbar befindet:

Wie Sie sehen können, hat die Schaltfläche einen schönen Rand auf der rechten Seite. Nun, ich möchte das gleiche mit meiner Logout-Button erreichen, aber ich weiß nicht, wie ohne meinen eigenen CSS-Code regelmäßig:

Ich denke, es gibt einen Weg, um den gleichen rechten Rand des erreichen Login-Taste für die Abmeldung mit Bootstrap. Hier ist der Code, die Logout-Button erstellt:

<div class="container"> 
    <nav class="navbar navbar-default" role="navigation"> 
     <span class="navbar-brand">@Model.User.UserName's profile</span> 
     <a class="btn navbar-btn btn-danger navbar-right" role="button" href="@Url.Action("UserLogout", "Login")">Logout</a> 
    </nav> 
    ... 
</div> 

Answer 1

Wenn Sie eine Bootstrap einzige Lösung wollen, können Sie Ihre span und a (Button) in eine zusätzliche 0 wickeln könnte

<div class="container"> 
<nav class="navbar navbar-default" role="navigation"> 
<div class="container"> 
    <span class="navbar-brand">@Model.User.UserName's profile</span> 
    <a class="btn navbar-btn btn-danger navbar-right pull-right" role="button" href="#">Logout</a> 
</div> 
</nav> 
... 

Siehe Fiddle

Answer 2

Versuchen Sie, die Klasse .pull-right zu verwenden, dann ein margin-right: ??px; zu der gleichen Klasse in Ihrem eigenen CSS-Stylesheet hinzufügen (Diese nach dem Bootstrap.css geladen werden muss)

So die a Tag würde wie folgt aussehen:

<a class="btn navbar-btn btn-danger navbar-right" role="button" href="@Url.Action("UserLogout", "Login")">Logout</a>