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

Я хочу реализовать раскрывающееся меню 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>

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

enter image description here

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

126
css html twitter-bootstrap

6 ответов

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

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

219

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

106

вы можете использовать class .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>
9

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

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

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

8

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

http://codeply.com/go/w2MJngNkDQ

5

float-*-right для Bootstrap 4

* = xs, sm, md, lg

1