Bootstrap button dropdown in btn-container with other buttons

Question

I am create a WYSIWYG editor in my free time. I decided I wanted to use the drop down to allow myself to select formatting. The problem is when I add a dropdown it isnt under the button but at the beginning of the the button container.

here is an image to show what I mean.

The first button looks active because the text is aligned left... Sorry I tried to find a way to fix that but the dropdown is from the last button.

My question is, is there a way to align a Twitter Bootstrap Dropdown, with the button it is supposed to be on or atleast make the dropdown with the width of the button container.

Answer 1

Yes. You can just add a rule, left: auto; right: 0; left: auto; right: 0; for the <ul> coming there, by targeting or giving a class, say .right-menu , this way:

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

A working demo of the same would be in jsFiddle .

Answer 2

It's not a bad thing to use .pull-right on the .dropdown-menu to make it stick to the right of the container.

As seen in the source , this class is meant to do that :

// Aligns the dropdown menu to right
&.pull-right {
  right: 0;
  left: auto;
}

---

If you prefer to make it as big as the container, you can try applying this to your menu :

.dropdown-menu {
  min-width: 100%;
}

You should keep .pull-right in case you have bigger menus.

Check the fiddle demo