显示引导下拉菜单以将列表定向到左侧而不是右侧

Question

I have an issue with the button dropdown from Bootstrap-Twitter 3.

JSFiddle

HTML

<div class="input-group">
    <input type="text" class="form-control">
    <!-- Split button -->
    <div class="input-group-btn">
     <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

In the JSFiddle above, you can see an input stick with a dropdown button at its right.

The problem is that the list of the dropdown button is displayed in a way that the list is cutted (the viewport should not expand itself, however this is what happens).

Question

How can I tell this element to display the list from the right to the left (reverse of the current behaviour) ?

Answer 1

From the documentation :

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.

<ul class="dropdown-menu dropdown-menu-right">
    <!-- your li elements... -->
</ul>

Updated fiddle

Answer 2

Try Use :

class="dropdown-menu pull-right"

As you can see here : Updated Fiddle

This will ensure the dropDown menu is pulling to the right, which gives it float:right!important .

This will ensure it's not hidden behind.

EDIT : Rory McCrossan's answer is the recommended solution for this question

Answer 3

You can do this by CSS (overwrite the default rule) or you can custom with a new class:

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

In fact is the same thing this class .pull-right from bootstrap library do:

CSS

.pull-right {
  right:0;
  left: auto;
}