Изменение направления выпадающего списка Bootstrap

Как изменить направление раскрывающегося списка Twitter Bootstrap?

У меня есть выпадающее меню:

What I have

Но я хочу, чтобы это выглядело так:

What I want

Ответы

Ответ 1

Используйте классы pull-right или pull-left.

Ответ 2

Из http://getbootstrap.com/components/#dropdowns-alignment:

Устаревшее выравнивание .pull-right
Начиная с версии 3.1.0, мы устарели .pull-right в раскрывающемся меню. Чтобы выровнять по правому краю меню, используйте .dropdown-menu-right. Выбранные по правому краю навигационные компоненты в навигационной панели используют mixin этого класса для автоматического выравнивания меню. к переопределите его, используйте .dropdown-menu-left.

В вашем случае добавление класса dropdown-menu-right в div, имеющее класс dropdown-menu, должно сделать трюк.

Ответ 3

Здесь (с помощью выпадающего меню-справа):

<ul class="dropdown-menu dropdown-menu-right">
   <li><a href"#">Action</a></li>
   <li><a href="#">Another action</a></li>
<ul>

Ответ 4

transform: rotateY или -webkit-transform:rotateY выполнит трюк, примените его для выпадающего меню;

navbar .pull-right > li > .dropdown-menu, .navbar .nav > li > .dropdown-menu.pull-right {
    -webkit-transform: rotateY(180deg);
}

Или вы можете вставить это в классы .dropdown-menu или .open > .dropdown-menu из-за вашего точного rquirement. Теперь это выглядит так:

drop1

Как видно, все ссылки должны быть возвращены, поэтому это просто сделать с тем же правилом CSS:

.dropdown-menu > li > a {
    -webkit-transform: rotateY(180deg);
}

Теперь это выглядит так:

drop2

Требуется небольшая очистка, изменив положение выпадающего меню на left:10px;, и оно будет выглядеть точно так, как вы хотели:

final result

Ответ 5

Кажется, в Twitter Bootstrap нет опции для обработки направления в раскрывающемся списке. Все, что имеет какое-то влияние на положение стрелки, - это класс .navbar .nav > li > .dropdown-menu:before Попробуйте с ним поиграть, чтобы просмотреть изменения в направлении выпадающего списка