alignment for twitter bootstrap dropdown-menu

Question

I have designed a bootstrap navbar with dropdown menu

http://jsfiddle.net/yabasha/fex8N/3/

<nav class="navbar navbar-inverse">
<div class="navbar-inner">
    <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
        </li>
    </ul>
</div>

ul.nav li.dropdown:hover > ul.dropdown-menu{
display: block;    
}

Is there a way to change the default alignment for the dropdown-menu (from left to center / right) so the arrow would display in center / right?

Answer 1

It's better to avoid the use of px for positioning, since the dropdown´s width may change. This would be more appropriate for centering the caret:

.navbar .nav > li > .dropdown-menu.pull-center:after {
  left: 50%;
  margin-left: -6px;
}
.navbar .nav > li > .dropdown-menu.pull-center:before {
  left: 50%;
  margin-left: -7px;
}

For right alignment, you just need to add the class pull-right to the dropdown:

<li class="dropdown">
  <a class="dropdown-toggle" href="#">Link</a>
  <ul class="dropdown-menu pull-right">
    <!-- your menu -->
  </ul>
</li>