有些菜單是需要向上彈出的，比如說你的菜單在頁面最底部，而這個菜單正好有一個下拉菜單，為了讓用戶有更好的體驗(yàn)，不得不讓下拉菜單向上彈出。在Bootstrap框架中專門為這種效果提代了一個類名“dropup”。使用方法正如前面所示，只需要在“btn-group”上添加這個類名（當(dāng)然，如果是普通向上彈出下拉菜單，你只需要在“dropdown”類名基礎(chǔ)上追加“dropup”類名即可）。

<div class="btn-group dropup">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按鈕下拉菜單<span class="caret"></span></button>
    <ul class="dropdown-menu">
         <li><a href="##">按鈕下拉菜單項(xiàng)</a></li>
         <li><a href="##">按鈕下拉菜單項(xiàng)</a></li>
         <li><a href="##">按鈕下拉菜單項(xiàng)</a></li>
         <li><a href="##">按鈕下拉菜單項(xiàng)</a></li>
    </ul>
</div>

運(yùn)行的效果如下：

/*源碼請查閱bootstrap.css文件第3115行～第3120行*/

.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-bottom: 1px;
}

從上面的例子中可以看出，實(shí)現(xiàn)方法為：主要將“dropdown-menu”的top值變成了auto，而把bottom值換成了100%：