Bootstrap выпадающие: позиционирование содержимого ниспадающего

Я следующее выпадающего менюBootstrap выпадающие: позиционирование содержимого ниспадающего

<label class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#"> 
    Action <b class="caret"></b></label> 
<ul class="dropdown-menu" role="menu" aria-labelledby="lang-selector" id="lang-selector"> 
    dropdown content goes here 
</ul>

В верхнем левом углу выпадающего меню находится в нижнем левом углу текста (действия), но я надеюсь, что позиция верхнего правого угла капельницы находится в правом нижнем углу текста. Как я могу это сделать?

Спасибо и приветствую.

источник

2013-07-28 curious1

130

Edit:

По состоянию на v3.1.0, мы осуждаемся .Снять право на раскрывающемся меню. Чтобы выровнять по правому краю меню, используйте .dropdown-menu-right. Выравнивание по правому краю навигационных элементов на навигационной панели с использованием версии mixin этого класса до автоматически выравнивает меню. Чтобы отменить его, используйте .dropdown-menu-left.

Вы можете использовать класс «выпадающий правый», чтобы выровнять правую часть меню с кареткой:

<li class="dropdown"> 
    <a class="dropdown-toggle" href="#">Link</a> 
    <ul class="dropdown-menu dropdown-menu-right"> 
    <li>...</li> 
    </ul> 
</li>

Работа скрипку здесь: http://jsfiddle.net/jaq54yw8/

Я оставил свой предыдущий ответ ниже на всякий случай, если кто-то использует Bootstrap < 3.1.0, но вы, как правило, должны использовать вышеприведенное (и если это не похоже на w orking проверьте номер версии Bootstrap, который вы включили)!

Вы можете использовать класс «вырывание права», чтобы выровнять правую часть меню с кареткой:

<li class="dropdown"> 
    <a class="dropdown-toggle" href="#">Link</a> 
    <ul class="dropdown-menu pull-right"> 
    <li>...</li> 
    </ul> 
</li>

источник

2013-10-08 16:52:17

Это работает для меня в B3 и кажется лучше. Я выбрал ваш ответ. Благодаря!!! – curious1

Я протестировал pull-right и pull-left на веб-сайте RTL. Они отлично работают, но выпадающее меню - справа и выпадающее меню - слева. – curious1

Контейнер (.dropdown) должен иметь дисплей «inline-bock». В этом примере LI отлично, но если бы это был DIV, выравнивание было бы помещено в конец элемента блока, на который влияет ширина подменю. – Nicholas

Не знаете, как другие люди решат эту проблему, или у Bootstrap есть какая-либо конфигурация для этого.

Я нашел эту нить, которая обеспечивает решение:

https://github.com/twbs/bootstrap/issues/1411

Один из поста предполагает использование

<ul class="dropdown-menu" style="right: 0; left: auto;">

Я проверил, и она работает.

Надеюсь узнать, предоставляет ли Bootstrap конфигурацию для этого, а не через приведенный выше css.

Cheers.

источник

2013-07-28 04:38:27 curious1

Спасибо, это помогает получить работу легко. –

Да! Спасибо @ curious1 –

Благодарю вас, этот работал на загрузку 4 выпадающего списка в навигаторе –

Boostrap имеет класс для этого называется navbar-right. Так что ваш код будет выглядеть следующим образом:

<ul class="nav navbar-right"> 
    <li class="dropdown"> 
     <a class="dropdown-toggle" href="#" data-toggle="dropdown">Link</a> 
     <ul class="dropdown-menu"> 
     <li>...</li> 
     </ul> 
    </li> 
</ul>

источник

2014-08-19 19:17:33

Не вижу OP, упоминающего навигационную панель. – knownasilya

на основе Bootstrap документе:

По состоянию на v3.1.0, .Снять правый осуждаются на раскрывающемся меню. использование.выпадающее меню правой

например:

<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">

источник

2014-12-06 04:50:36 ninetiger

Я проверил pull-right и pull-left на веб-сайте RTL. Они отлично работают, но выпадающее меню - справа и выпадающее меню - слева. – curious1

-3

использовать этот код:

<ul class="dropdown-menu" role="menu"> 
    <li style="text-align: right;"><a href="#">ParsLearn[dot]ir</a></li> 
</ul>

источник

2015-02-18 18:45:50

Я не думаю, что это делает то, что он просит –

Если хочет центрирование ниспадающего меню, это решение.

<ul class="dropdown-menu" style="right:auto; left: auto;">

источник

2016-01-31 04:59:08

Если вы хотите, чтобы отобразить меню вверх, просто добавьте класс «dropup»
и удалить класс «выпадающий список», если существует с того же дел.

<div class="btn-group dropup">

источник

2016-10-11 09:01:30

«Надеюсь, что положение верхнего правого угла капельницы находится в правом нижнем углу текста» - OP –

Я не могу понять, что вы комментируете, извините! ! –

Bootstrap выпадающие: позиционирование содержимого ниспадающего

ответ

Смежные вопросы