Бутстрап выпадающего пузыря выровнять по правому краю (не нажать-право)

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

как это

enter image description here

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>

Ответы

Ответ 1

Бутстрап 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>

Кажется, это работает для меня с использованием начальной загрузки 3.0

Ответ 2

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

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

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

Ответ 3

in bootstrap v 3.1.0 ответ на этот вопрос отличается.

jsfiddle

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

Ответ 4

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

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

Ответ 5

ok получил это!

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