将导航栏右侧的按钮对齐，在右侧留出边距

Question

我正在使用Bootstrap来设计网站样式，一切都适用于登录表单，该表单位于导航栏中：

正如您所看到的，该按钮右侧有一个很好的边距。好吧，我希望通过我的注销按钮实现相同的功能，但我不知道如何重复使用我自己的CSS代码：

我认为有一种方法可以使用Bootstrap为登出按钮实现登录按钮的相同右边距。这是创建注销按钮的代码：

<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

Try to use the class .pull-right, then add a margin-right: ??px; to the same class in your own css stylesheet (This has to be loaded after the Bootstrap.css)

So the a Tag would look like this:

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

Answer 2

If you want a bootstrap only solution, you could wrap your span and a (button) into an additional container

<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>  
...

See Fiddle