Щелкать панель навигации Bootstrap - выровнять меню выровненного по правому краю

Я использую Twitter Bootstrap (v2.1.1) с PHP-сайтом. Я динамически создаю навигационную панель в php script, поскольку панель навигации будет иметь разный контент, если пользователь войдет в систему или покинет сайт.

Я хотел бы выровнять последнее выпадающее меню справа от экрана, но пока не удалось. Здесь jsFiddle показывает упрощенную версию:

http://jsfiddle.net/fmdataweb/AUgEA/

Я хотел бы, чтобы меню 2 выпадало правильно. Код последнего выпадающего списка такой же, как и для других выпадающих меню:

<li class="dropdown pull-right">
<a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">Menu 2<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="propertiesSearch.php">Logout</a></li>
</ul>
</li>

Я пробовал использовать его для:

<li class="dropdown pull-right">

но это не имеет значения. Кто-нибудь знает, как вывести раскрывающееся меню вправо, как вы можете, с формами и <p> текст?

Ответы

Ответ 1

Вам нужно изменить класс .pull-right на ul вместо li.

HTML

<ul class="nav pull-right">
  <li class="dropdown">
    <a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">
      Menu 2
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="propertiesSearch.php">Logout</a></li>
    </ul>
  </li>
</ul>

Версия 2.1.1

Я переписал ваш код, включая только необходимые плагины JavaScript (bootstrap-dropdown.js), последнюю версию Twitter Bootstrap (2.1.1) и поддержку отзывчивого дизайна.

http://jsfiddle.net/caio/gvw7j/

Если вы видите отзывчивое меню в приведенной выше ссылке, вы можете увидеть "широкий результат" по этой ссылке:

http://jsfiddle.net/caio/gvw7j/embedded/result/

.pull-right определяется следующим образом:

.pull-right {
  float: right !important;
}

Версия 3.1.1

В этом классе изменений не было. Вы можете увидеть раздел помощников.

Однако в документации рекомендуется использовать класс .navbar-right, поскольку он имеет определенные оптимизации, в отличие от класса pull-right.

Ответ 2

Для тех, кто использует Bootstrap 3, .navbar-right выполнит трюк.

Например,

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

Ответ 3

Вместо того, чтобы потянуть элемент li влево, просто добавьте этот элемент, который вы хотите выровнять по правому краю в своем собственном списке ul, и потяните его так:

HTML

<ul class="nav pull-right">
    <li class="dropdown">
        <a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">Menu 2<b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="propertiesSearch.php">Logout</a></li>
        </ul>
    </li>    
</ul>

Демо: http://jsfiddle.net/AUgEA/1/

Ответ 4

Если вы пришли сюда, пытаясь правильно выровнять обычный загрузочный тег .dropdown-menu и NOT a .nav и используете Bootstrap 3, правильный класс для добавления .dropdown-menu-right

Здесь загрузочная документация:

<ul class="dropdown-menu dropdown-menu-right">
  ...
</ul>