выпадающий пузырь бутстрапа выравнивается по правому краю (не нажимается вправо)

91

У меня есть корзина в моем верхнем меню, push-rightи моя проблема в том, что выпадающий пузырь выпадает со страницы. Я пытаюсь выровнять пузырек по правому краю, чтобы он выровнялся по правому краю с помощью "щелчка"

как это

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

HTML:

<div class="cart pull-right">
  <ul class="nav">
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">CLICK</a>
       <div class="dropdown-menu">
       STUFF
       </div>
    </li>
  </ul>
</div>
no0ne
источник
2
Лучше поместить в jsfiddle.net, чтобы показать другим, что у вас есть.
JofryHS
вы пробовали right:0;выпадающий список?
Рахул

Ответы:

193

Bootstrap 3.1+

Добавление класса .dropdown-menu-right в тот же div, содержащий раскрывающееся меню класса:

<div class="dropdown-menu dropdown-menu-right">
    STUFF
</div>

http://getbootstrap.com/components/#dropdowns-alignment

Bootstrap 2.3 и 3.0

Добавьте класс .pull-right в тот же div, содержащий раскрывающееся меню класса

<div class="dropdown-menu pull-right">
    STUFF
</div>

Кажется, это работает для меня с использованием bootstrap 3.0

митри
источник
20
Начиная с версии 3.1.0, вы можете использовать dropdown-menu-right . См. Github.com/twbs/bootstrap/blob/v3.1.0/less/dropdowns.less#L135
Лоран Дезиттер
19

Это может быть решено с классом начальной загрузки dropdown-menu-right с , dropdown-menuчто именно для этой проблемы , которая использует свойства CSS right: 0;и left: auto;к правому краю его.

Это решение работает для меня.

Источник - http://getbootstrap.com/components/#btn-dropdowns-dropup (для этого перейдите в инструменты разработчика)

Джасприт Сингх
источник
1
Да, это правильное решение (Bootstrap 3.3.7). Просто убедитесь, что вы добавили класс dropdown-menu-rightв тот, ulкоторый содержит параметры меню (не на кнопку)
Мигель
6
<div class="dropdown-menu dropdown-menu-right">

Это все еще работает в boostrap 4.2.1 :)

Георгий Пеев
источник
5

в bootstrap v 3.1.0ответ на этот вопрос другое.

jsfiddle

<div class="dropdown-menu pull-menu-right">
       STUFF
</div>
Энтузиаст программирования
источник
2

хорошо понял!

position:relative;left:0 на <ul class="dropdown-menu">

no0ne
источник