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

151

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

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

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

введите описание изображения здесь

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

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

Ответы:

263

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

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

Росс
источник
29
Это совершенно отдельный вопрос
Dewayne
14
Этот ответ на самом деле не решает проблему, если пользователь использует какое-то устройство с меньшим экраном - он выходит из левой части вместо правой (фактически, вы просто меняете левую и правую).
Аноним
5
Смотрите ответ на вопрос krzychu как Bootstrap.pull-right устарел
Jeroen
1
@ ХристоЕнев мне тоже. Твои выпадающие выпали далеко от кнопки?
Чойлтон Б. Хиггинботтом
116

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

krzychu
источник
10
Даже с последней загрузкой у меня работает .pull-right, а .dropdown-menu-right ничего не делает.
Шейн Грант
Это действительно работает в Bootstrap 4, за исключением того, что вы добавляете класс .dropdown-menu-right в div.dropdown-menu (не ul)
Тимоти Кански,
<ul class="dropdown-menu dropdown-menu-right">работал у меня на 4.1.1
dw1
22

Для Bootstrap 4 добавление dropdown-menu-rightработает. Вот рабочий пример ..

http://codeply.com/go/w2MJngNkDQ

praj
источник
Я попробовал все остальные ответы - и этот был единственным, который работал на меня. Я использую Bootstrap v. 4.1.0.
Зет
14

решение, которое не требует изменения HTML только CSS

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

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

GiorgosK
источник
1
это единственное решение, которое работает для начальной загрузки 4.0.0
charsi
10

Вы можете использовать класс .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>
Развернуть фрагмент

Мохан Дере
источник
2

в Bootstrap 4 вы можете использовать .dropleft

просто измените на:

<span class="dropleft">

или

добавить .dropdown-menu- {lg, med, sm, xs} - прямо в выпадающее меню 

<div class="dropdown-menu dropdown-menu-sm-right" aria-labelledby="dropdown03">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
</div>
Деди Сетаван
источник
1

float-*-right для Bootstrap 4

* = xs, sm, md, lg

Джереми Линч
источник
0

Я не могу оставить комментарий, потому что мой уровень SO слишком низок, но я просто удостоверился, что родительский контейнер установлен на «переполнение: скрыто», вот так (также убедитесь, что позиция установлена).

<div style="overflow:hidden;position:relative">
    <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>
</div>
hackdotslashdotkill
источник