Начальной загрузки выпадающего списка: позиционирование выпадающего содержимого

У меня есть следующий выпадающий список

<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>

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

спасибо и с уважением.

7 77
css twitter-bootstrap drop-down-menu

7 ответов:

Edit:

по состоянию на v3.1 .0, мы устарели.потяните вправо на выпадающих меню. К вправо-выровнять меню, использовать .выпадающее меню-справа. По правому краю навигация компоненты в навигационной панели используют версию mixin этого класса для автоматическое выравнивание меню. Чтобы переопределить его, используйте .выпадающее меню-слева.

вы можете использовать класс 'dropdown-right', чтобы выровнять правую часть меню вверх с помощью каре:

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

A right-aligned menu

рабочая скрипка здесь:http://jsfiddle.net/jaq54yw8/

Я оставил свой предыдущий ответ ниже на всякий случай, если кто-то использует Bootstrap дважды проверьте номер версии Bootstrap, который вы в том числе)!

вы можете использовать класс 'pull-right' для выравнивания правой стороны меню вверх с кареткой:

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

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

Я нашел этот поток, который обеспечивает решение:

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

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

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

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

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

Ура.

45

на основе Bootstrap doc:

по состоянию на v3.1 .0,.pull-right является устаревшим в выпадающих меню. использовать.выпадающее меню-справа

например:

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

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

<div class="btn-group dropup">

enter image description here

7

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>
1

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

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

используйте этот код :

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