右对齐的下拉菜单

Bootstrap3中，默认情况下，下拉菜单的左边缘自动与父对象的左边缘对齐。为下拉菜单追加 .dropdown-menu-right 类可以让它右对齐，即让下拉菜单的右边缘，与父对象的右边缘对齐。如：

1. <div class="dropup">
2.   <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
3.     Dropup
4.     <span class="caret"></span>
5.   </button>
6.   <ul class="dropdown-menu dropdown-menu-right">
7.     <li><a tabindex="-1" href="#">Action</a></li>
8.     <li><a tabindex="-1" href="#">Another action</a></li>
9.     <li><a tabindex="-1" href="#">Something else here</a></li>
10.   </ul>
11. </div>

效果如图 3‑11所示：

图3-11 右对齐的下拉菜单

在正常的文档流中，通过 CSS 为下拉菜单进行定位。因此，下拉菜单可能会因为设置了overflow属性的父元素而被部分遮挡或超出视口（viewport）的显示范围。如果出现这种问题，请自行解决。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。