Bootstrap 3, как правильно выровнять кнопку на навигационной панели?

Ответ 1

Отметьте демо

.navbar-header{
  margin-left:5px;
  width:100%;
}

И добавьте

тянуть вправо

на вашу кнопку.

Ответ 2

Для Bootstrap 3, .navbar-right делает именно это.

<ul class="nav navbar-nav navbar-right">
.
.
</ul>

Ответ 3

Внутри навигационной панели в случае выравнивания Bootstrap происходит несколько иначе.

Для выравнивания элементов справа в навигационной панели поместите необходимые элементы в отдельный div и внутри него создайте ul и добавьте требуемые элементы в списке.

В div добавьте класс .pull-right, чтобы выравнивать элементы вправо.

Пример кода:

<div class="pull-right">
        <ul class="nav navbar-nav">
            <li><button type="submit" class="btn navbar-btn btn-danger" name="logout" id="logout"  value="Log Out">Log Out</button></li>
        </ul>     
</div>

Если есть проблемы с выравниванием элементов слева от навигационной панели и класса .pull-left для этого div

Ответ 4

A DEMO ЗДЕСЬ

Хорошо, сделайте это изменение.

.navbar-header{
  width:100%;
}

Затем поместите класс на кнопку, которую вы хотите поместить с правой стороны, например right-side-button

затем примените этот класс к a и отредактируйте в css таким образом:

.right-side-button{
  float:right;
}

И все готово!