Раскрывающийся список Twitter загружается за пределы экрана

115

Я хочу реализовать раскрывающееся меню twitter bootstrap, здесь мой код:

<span class="dropdown"> 
<a href="#menu1" class="dropdown-toggle" data-toggle="dropdown" ><img class="left" src="/static/img/topmenu_preferences.png" /><b class="caret"></b></a>
<ul class="dropdown-menu">
  <li><a href="#">a</a></li>
  <li><a href="#">b</a></li>
  <li><a href="#">c</a></li>
  <li class="divider"></li>
  <li><a href="#">d</a></li>
</ul>

Dropdown работает хорошо, мое раскрывающееся меню расположено рядом с правым краем экрана, и когда я нажимаю на раскрывающийся список, список выходит за пределы экрана. Похоже, на экране:

Изображение 125

Как я могу это исправить?

  • 0
    Правильный ответ (для bootstrap> = v 3.2.0) на этот вопрос решается здесь: stackoverflow.com/questions/23654962/… by @cvrebert.
  • 0
    Я полагаю, что в вашем коде отсутствует тег конца диапазона: </ span>
Теги:

5 ответов

201
Лучший ответ

добавление .pull-right в ul.dropdown-menu должно сделать это

Уведомление об изнашивании: Начиная с Bootstrap v3.1.0, .pull-right в выпадающих меню устарел. Чтобы выровнять по правому краю меню, используйте .dropdown-menu-right.

Поделиться
  • 27
    Это совершенно отдельный вопрос
  • 0
    Прекрасно, работал угощение для меня
Показать ещё 5 комментариев
100

Так как Bootstrap v3.1.0 добавление .pull-right устарело в раскрывающихся меню. A .dropdown-menu-right следует добавить вместо ul.dropdown-menu. Документы

Поделиться
  • 10
    Даже с последней загрузкой у меня работает .pull-right, а .dropdown-menu-right ничего не делает.
  • 14
    .dropdown-menu-right отлично работает для меня.
Показать ещё 4 комментария
5

Вы можете использовать класс .dropdown-pull-right со следующим css:

.dropdown-pull-right {
  float: right !important;
  right: 0;
  left: auto;
}

.dropdown-pull-right>.dropdown-menu {
  right: 0;
  left: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>


<div class="dropdown dropdown-pull-right btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
  Open Dropdown
  <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>
Поделиться
3

решение, которое не нуждается в модификации HTML, только CSS

li.dropdown:last-child .dropdown-menu {
  right: 0;
  left: auto;
}

Его особенно полезно для динамически создаваемых меню, где его не всегда можно добавить рекомендуемый класс dropdown-menu-right к последнему элементу

Поделиться
  • 0
    это единственное решение, которое работает для начальной загрузки 4.0.0
  • 0
    спасибо работает бутстрап 4х
1

float-*-right для Bootstrap 4

*= xs, sm, md, lg

Поделиться
  • 1
    Кажется, не работает. Попробовал float-right .

Ещё вопросы

Сообщество Overcoder
Наверх
Меню