ブートストラップのドロップダウンを左に切り替えます

Question

私のドロップダウンはボタンとul要素で構成されています。ボタンがクリックされると、ボタンの下にulが表示され、これを左側に表示するように変更したいと思います。 class = "dropdown-submenu pull-left"をli要素に使用するか、データ配置をボタンに使用するなど、いくつか試してみましたが運がなかった。

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

Answer 1

一つの解決策は、カスタムスクリプトを追加することで、少しのスタイル。

親（.dropdownが親である）のITの先頭に.dropdown-menuを置く：

.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