Совместите кнопку справа внутри навигационной панели, оставляя запас на правую

Question

Я использую Bootstrap для укладки сайта и все работает для формы входа, который находится внутри навигационной панели:

Как вы можете видеть, кнопка имеет хороший запас справа. Ну, я хочу, чтобы добиться того же с моей кнопкой выхода из системы, но я не знаю, как, не прибегая к мой собственный код CSS:

Я думаю, что есть способ, чтобы достигнуть того же самого правого края login для выхода из системы с помощью 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

Если вы хотите самозагрузки единственным решения, вы можете обернуть (кнопку) 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

Answer 2

Попробуйте использовать класс .pull-right, затем добавить margin-right: ??px; к тому же класса в ваших собственных таблице стилей CSS (Это должно быть загружено после Bootstrap.css)

Так a Tag будет выглядеть следующим образом:

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