Question

我的下拉列表包含一个按钮和一个ul元素。单击按钮时，ul会出现在按钮下方，我想将其更改为显示在左侧。我尝试了一些方法，例如在li元素上使用 class =＆＃34; dropdown-submenu pull-left＆＃34; 或在上使用数据放置按钮但没有运气。

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

打开bootstrap下拉切换到左侧

1 个答案: