Twitter Bootstrap從底部對齊下拉框

我有一個引導表顯示數據的動態行數。最後的<td>包含一個觸發器，點擊後會顯示引導程序下拉列表。問題在於，當表格的內容變得太大時，激活該下拉菜單會將其顯示在可點擊的觸發器下方，而不管它在屏幕上的哪個位置。如果觸發器位於頁面的最底部，點擊時下拉菜單會增加頁面高度，用戶將不得不再次向下滾動才能看到下拉菜單的其餘部分。Twitter Bootstrap從底部對齊下拉框

這也有其他的影響，比如它可能會有這麼輕微（但惱人）的效果，即視口的頁面高度會觸發滾動條的顯示，減少頁面的寬度足夠明顯，但只有當下拉菜單可見時纔會顯示。

有沒有什麼方法可以使用twitter引導讓下拉菜單識別它實際上會垂直延伸到視口之外，如果它將會呈現垂直向上的對齊方式嗎？一種動態的class="dropdown pull-up"，其中bootstrap足夠聰明，知道只有在必要時纔對齊，以使下拉顯示不超過視口的底部？

來源

2013-03-07 Scott

你可以請張貼代碼。 – Shail 2013-03-08 02:08:58

是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>

來源

2013-03-07 20:01:53 bleuscyther

這是我的一個有趣的疏忽。它似乎缺乏的唯一方法是區分是否需要使用下拉菜單或dropup來保持菜單（完整）在視口內的自動方式。我是否正確認爲我需要使用JavaScript從外部引導來處理？ – Scott 2013-03-07 20:23:44

他們剛剛添加它。（'#mydiv'）。click（function（if（（''#mymenu'）。height（）。replace（'px'））如果你想要使用JavaScript來添加類.dropup並移除.dropdown，，''）> 98）... $（'＃mymenu'）。removeClass（'。dropdown'）; $（'＃mymenu'）。addClass（'。dropup'）; ... – bleuscyther 2013-03-07 21:02:37

Twitter Bootstrap從底部對齊下拉框

回答

相關問題