如何获得引导下拉菜单“dropup”
我有一个Bootstrap下拉菜单。 最后一个项目是一个子菜单。 当完整菜单下降时，如何获得子菜单dropup？ 代码如下：
<div class="dropdown"> <a class="inputBarA dropdown-toggle" data-toggle="dropdown" href="#">FILTER</a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> <li role="presentation"> <a role="menuitem" href="#">Text</a> </li> <li role="presentation"> <label>Label name</label> <label>Label name</label> <label class="checkbox"> <input type="checkbox"> Text </label> <label class="checkbox"> <input type="checkbox"> Text </label> <label class="checkbox"> <input type="checkbox"> Text </label> <label class="checkbox"> <input type="checkbox"> Text </label> </li> <li class="dropdown-submenu"> <a tabindex="-1" href="#">Centralities</a> <ul class="dropdown-menu"> <label class="radio"> <input type="radio" name="options" id="optionsRadios1" value="A" checked> AA </label> <label class="radio"> <input type="radio" name="options" id="optionsRadios2" value="B"> BB </label><label class="radio"> <input type="radio" name="options" id="optionsRadios2" value="C"> CC </label><label class="radio"> <input type="radio" name="options" id="optionsRadios2" value="D"> DD </label><label class="radio"> <input type="radio" name="options" id="optionsRadios2" value="E"> EE </label> </ul> </li> </ul> </div>
这听起来像下面的答案是如何从头开始做，我不知道有一个在Bootstrap上的一个dropup类…
所以Bootstrap的简短答案是在早期版本的bootstrap中将类“dropup”应用于<ul> ：
<ul class="dropdown-menu dropup" role="menu" aria-labelledby="dLabel">
然而在较新版本的bootstrap（v3）中，“dropup”类需要被应用到<ul>的容器而不是<ul>本身：
<div class="dropup"> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> </div>
原始的工作答案，不使用引导：
您可以使用javascript来计算子菜单的高度，然后消极地抵消子菜单的位置。
像（使用jQuery）：
$('.dropdown-submenu').hover( function(){ //hover in $('.dropdown-submenu > ul').css('top', '-' + $('.dropdown-submenu > ul').css('height')); }, //hover out function(){ } );
小提琴： http : //jsfiddle.net/ZgyZP/4/
最好的解决scheme：
<div class="dropup"> <ul class="dropdown-menu"></ul> </div>
这是一个自学的本地课。 Bootstrap（使用3.1.1）的css文件有一个.dropup .dropdown-menuselect器，所以这就是我发现的。
使用一个类，就像<ul class="dropdown up">
写下.up { bottom:100% !important; top:auto !important; }风格.up { bottom:100% !important; top:auto !important; } .up { bottom:100% !important; top:auto !important; }
注意： 按照您的button大小增加底部。
<div class="dropup"> <ul class="dropdown-menu"></ul> </div>
上面的代码是正确的，但不工作，除非父元素具有位置属性设置。
工作的例子是class="col-lg-12"或者只是
<div style="position: relative;">
我使用Bootstrap v3.0.0。
我使用了Dropup类，它完美地工作，因为我期望它。
<div class="col-md-6 dropup"> <span uib-dropdown auto-close="outsideClick"> <p class="input-group"> <input type="text" class="form-control" ng-model="int.schTimeFormatted" ng-disabled="true" name="schTime" /> <span class="input-group-btn"> <button type="button" class="btn btn-default cal" uib-dropdown-toggle> <i class="glyphicon glyphicon-time"></i> </button> </span> </p> <ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown"> <li class="timerDropdown"> <div class="row"> <div class="col-md-6"> <div uib-timepicker ng-model="int.schTime" ng-change="changed()" hour-step="hstep" minute-step="mstep" readonly-input="true" min="min" max="max" show-meridian="ismeridian"></div> </div> <div> Booked Timeslots <ul id="timeListB"> <li ng-repeat="time in bookedTimeslots">{{time | date:"h:mma"}}</li> </ul> </div> </div> <hr> <button class="pull-right">close</button> </li> </ul> </span> </div>
