Drop down menu 打开左侧的引导下拉开关

我的下拉列表由一个按钮和一个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>

一种解决方案是添加自定义脚本和一些样式

将
.dropdown菜单
置于其父菜单的顶部（
.dropdown
为父菜单）：

并添加一些脚本：


.dropdown-menu{
  top: 0;
}

$('.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);
})