css - 在导航栏内将按钮向右对齐，在右侧留出边距

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

如果你想要一个仅 Bootstrap 的解决方案，你可以将你的 span 和 a (按钮)包装到一个额外的 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>  
...

参见 Fiddle