Html 如何将 Bootstrap 下拉子菜单设置为“dropup”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17581352/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get a Bootstrap dropdown submenu to 'dropup'
提问by user1114864
I have a Bootstrap dropdown menu. The last liitem is a submenu. How do I get the submenu to dropup while the full menu drops down? Here's the code:
我有一个 Bootstrap 下拉菜单。最后li一项是子菜单。如何在完整菜单下拉时让子菜单下拉？这是代码：
<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>
回答by Sem
The best solution:
最佳解决方案：
<div class="dropup">
<ul class="dropdown-menu"></ul>
</div>
It's a native class in bootstrap. The bootstrap (using 3.1.1) css file has a .dropup .dropdown-menuselector so that's how I found out.
它是引导程序中的本地类。引导程序（使用 3.1.1）css 文件有一个.dropup .dropdown-menu选择器，所以我就是这样发现的。
回答by DrCord
It sounds like the answer below would be how to do it from scratch, I was unaware there was a dropup class in Bootstrap...
听起来下面的答案是如何从头开始，我不知道 Bootstrap 中有一个 dropup 类......
So the short Bootstrap answer is to apply the class "dropup" to the <ul>in earlier versions of bootstrap:
因此，简短的 Bootstrap 答案是将“dropup”类应用于<ul>早期版本的引导程序：
<ul class="dropdown-menu dropup" role="menu" aria-labelledby="dLabel">
However in newer versions of bootstrap (v3) the "dropup" class needs to be applied to the <ul>'s container instead of the the <ul>itself:
然而，在较新版本的引导程序（v3）中，“dropup”类需要应用于<ul>的容器而不是<ul>本身：
<div class="dropup">
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
</div>
See http://jsfiddle.net/ZgyZP/5/
Original working answer that doesn't use bootstrap:
不使用引导程序的原始工作答案：
You could use javascript to calculate the height of the submenu and then negatively offset the submenu's position.
您可以使用 javascript 来计算子菜单的高度，然后负偏移子菜单的位置。
something like (with jQuery):
类似（使用 jQuery）：
$('.dropdown-submenu').hover(
function(){
//hover in
$('.dropdown-submenu > ul').css('top', '-' + $('.dropdown-submenu > ul').css('height'));
},
//hover out
function(){
}
);
Fiddle: http://jsfiddle.net/ZgyZP/4/
回答by Manjesh V
Use a class, like up<ul class="dropdown up">
使用一个类，就像up<ul class="dropdown up">
Write style of up.up { bottom:100% !important; top:auto !important; }
写风格向上.up { bottom:100% !important; top:auto !important; }
Note:Increase bottom as per your button size.
注意：根据您的按钮大小增加底部。
回答by pekaaw
<div class="dropup">
<ul class="dropdown-menu"></ul>
</div>
The above code is correct, but doesn't work unless a parent element has the position property set.
上面的代码是正确的，但除非父元素设置了 position 属性，否则它不起作用。
Examples that works are class="col-lg-12"or just
有效的例子是class="col-lg-12"或只是
<div style="position: relative;">
I use Bootstrap v3.0.0.
我使用 Bootstrap v3.0.0。
回答by kads
I used the dropup Class, and it worked perfectly as i expected it.
我使用了 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>
