Question

I’m using the Twitter Bootstrap (v2.1.1) with a PHP site. I’m generating the navigation bar dynamically in a php script as the navigation bar will have different content if the user is logged in or out of the site.

I would like to align the last dropdown menu to the right of the screen but haven’t been able to so far. Here’s a jsFiddle showing a simplified version:

http://jsfiddle.net/fmdataweb/AUgEA/

I would like the Menu 2 drop down to be right aligned. The code the for last dropdown is the same as for other dropdowns:

<li class="dropdown pull-right">
<a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">Menu 2<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="propertiesSearch.php">Logout</a></li>
</ul>
</li>          

I’ve tried chaging it to:

<li class="dropdown pull-right">

but that makes no difference. Anyone know how to pull the dropdown menu to the right like you can with forms and <p> text?

Answer 1

You need to change the .pull-right class to ul element instead of li.

HTML

<ul class="nav pull-right">
  <li class="dropdown">
    <a href="properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">
      Menu 2
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="propertiesSearch.php">Logout</a></li>
    </ul>
  </li>
</ul>

---

Version 2.1.1

I rewrote your code including only necessary JavaScript plugins (bootstrap-dropdown.js), the latest version of Twitter Bootstrap (2.1.1) and support for responsive design.

http://jsfiddle.net/caio/gvw7j/

If you see the responsive menu in the above link, you can see the “wide result” in this link:

http://jsfiddle.net/caio/gvw7j/embedded/result/

.pull-right is defined by:

.pull-right {
  float: right !important;
}

---

Version 3.1.1

There were no changes in this class. You might see the helpers classes section.

However, the documentation recommends using the class .navbar-right because it has some specific optimizations, unlike the pull-right class.