打開引導程序下拉菜單 - 左側切換

我的下拉菜單包含一個按鈕和一個ul元素。點擊按鈕後，ul會出現在按鈕下方，我想將其更改爲顯示在左側。我試過幾件東西，比如在li元素上使用class =「dropdown-submenu pull-left」，或者在按鈕上使用數據放置，但沒有運氣。打開引導程序下拉菜單 - 左側切換

<div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" title="Grid"> 
     <span id="glyph" class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> 
     <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu"> 
     <li><a style="cursor: pointer;" data-class="list-alt" onclick="changeGlyph(this)">Grid</a></li> 
     <li><a style="cursor: pointer;" data-class="globe" onclick="changeGlyph(this)">Map</a></li> 
     <li><a style="cursor: pointer;" data-class="tasks" onclick="changeGlyph(this)">Summary</a></li> 
    </ul> 
</div>

https://jsfiddle.net/g7pe3e06/1/

來源

2016-04-20 Konstantinos Papakonstantinou

一種解決方案是添加自定義腳本，和一點點的風格。

把.dropdown-menu頂端的它的父（.dropdown是父）：

.dropdown-menu{ 
    top: 0; 
}

，並添加一些腳本上Bootstraps show.bs.dropdown dropdown event：

$('.dropdown').on('show.bs.dropdown', function(){ 

    //get the value (.dropdown-menu's width) and make it negative 
    var length = parseInt($('.dropdown-menu').css('width'), 10) * -1; 

    $('.dropdown-menu').css('left', length); 
})

Here's the fiddle

來源

2016-04-20 09:18:59 Vucko

打開引導程序下拉菜單 - 左側切換

回答

相關問題