Ответ 1
Используйте классы pull-right
или pull-left
.
Как изменить направление раскрывающегося списка Twitter Bootstrap?
У меня есть выпадающее меню:
Но я хочу, чтобы это выглядело так:
Используйте классы pull-right
или pull-left
.
Из 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
, должно сделать трюк.
Здесь (с помощью выпадающего меню-справа):
<ul class="dropdown-menu dropdown-menu-right">
<li><a href"#">Action</a></li>
<li><a href="#">Another action</a></li>
<ul>
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. Теперь это выглядит так:
Как видно, все ссылки должны быть возвращены, поэтому это просто сделать с тем же правилом CSS:
.dropdown-menu > li > a {
-webkit-transform: rotateY(180deg);
}
Теперь это выглядит так:
Требуется небольшая очистка, изменив положение выпадающего меню на left:10px;
, и оно будет выглядеть точно так, как вы хотели:
Кажется, в Twitter Bootstrap нет опции для обработки направления в раскрывающемся списке. Все, что имеет какое-то влияние на положение стрелки, - это класс .navbar .nav > li > .dropdown-menu:before
Попробуйте с ним поиграть, чтобы просмотреть изменения в направлении выпадающего списка