打开bootstrap下拉列表 - 左侧的切换 [英] Open bootstrap dropdown-toggle to the left

问题描述

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

 < div class =dropdown> 
< button class =btn btn-default dropdown-toggletype =buttondata-toggle =dropdowntitle =Grid> 
< span id =glyphclass =glyphicon glyphicon-list-altaria-hidden =true>< / span> 
< span class =caret>< / span> 
< / button> 
< ul class =dropdown-menu> 
< li>< a style =cursor：pointer; data-class =list-altonclick =changeGlyph（this）> Grid< / a>< / li> 
< li>< a style =cursor：pointer; data-class =globeonclick =changeGlyph（this）> Map< / a>< / li> 
< li>< a style =cursor：pointer; data-class =tasksonclick =changeGlyph（this）>摘要< / a>< / li> 
< / ul> 
< / div> 
  

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

解决方案

一个解决方案是添加您的自定义脚本和一些小样式。

将 .dropdown-menu 放在父的顶部（ .dropdown 是父母）：

  .dropdown-menu {
顶部：0; 
} 
  

在 Bootstraps show.bs.dropdown 下拉列表事件：

  $（'。dropdown'）。on（'show.bs.dropdown'，function（）{
 
 //获取值（.dropdown-menu的宽度）并使其为负
 var length = parseInt（$（'。dropdown-menu'）。css（'width'），10）* -1; 
 
 $（'。dropdown-menu'）。css（'left'，length）; 
}）
  

这是小提琴

My dropdown consists of a button and a ul element. When the button is clicked the ul appears below the button and I would like to change this to appear to the left. I have tried a few things, such as using class="dropdown-submenu pull-left" on the li elements or using data-placement on the button but had no luck.

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

解决方案

One solution is to add your custom script, and a little styles.

Put the .dropdown-menu to the top of it's parent(.dropdown is the parent):

.dropdown-menu{
  top: 0;
}

And add some script on 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下拉列表 - 左侧的切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！