Twitter Bootstrap从底部对齐下拉列表

时间:2013-03-07 19:30:03

标签: twitter-bootstrap

我有一个引导表,显示具有动态行数的数据。最后一个<td>包含一个触发器,单击该按钮时会显示一个引导下拉列表。问题是当表的内容变得太大时,激活该下拉列表会将其显示在可点击的触发器下方,无论它在屏幕上的哪个位置。如果触发器位于页面的最底部,则单击该下拉列表将增加页面高度,用户将不得不再次向下滚动以查看下拉列表的其余部分。

这也有其他含义,例如它可能具有如此轻微(但令人讨厌)的效果,其中视口的页面高度将触发滚动条的显示,减小页面的宽度,足以引起注意,但仅当下拉列表可见时。

使用twitter引导程序是否有任何方法让下拉列表识别它实际上会垂直延伸到视口之外,如果它会,它会垂直向上对齐吗?一种动态class="dropdown pull-up",其中bootstrap足够智能,只有在必要时才能知道如何在视口底部之外没有下拉显示?

1 个答案:

答案 0 :(得分:7)

Dropup menus(请参阅本节中的下拉示例)

确保您使用的是最新版本

<div class="btn-group dropup">
  <button class="btn">Dropup</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>