面板中的 Bootstrap 下拉菜单

本文介绍了面板中的 Bootstrap 下拉菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在面板中有一个引导下拉菜单.我的问题是它不能很好地处理菜单碰到面板边界时发生的情况.例如，如果它碰到底部边框，我更喜欢它滚动.此外，更重要的是，如果它离开屏幕的右侧，我更喜欢它向左走，或者甚至忽略面板边界并离开面板.

例如，请参阅以下小提琴.单击下拉按钮以查看菜单.将鼠标悬停在过滤器类型"选项上以获取右侧的菜单.尤其要注意第一个下拉菜单和第二个下拉菜单中的过滤器类型子菜单.


<div class="panel-body"><div style="min-height: 300px; overflow: auto;"><table style="display: inline-block;"><头><tr><th><div class="input-group"><input class="form-control"/><div class="input-group-btn"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button><ul class="dropdown-menu dropdown-menu-right"><a class="text-right">过滤器类型<span class="glyphicon glyphicon-menu-right"></span></a><ul class="下拉菜单"><li><a>包含</a></li><li><a>等于</a></li><li><a>小于</a></li><li><a>大于</a></li>
<li><a>第1行</a></li><li><a>第2行</a></li><li><a>第3行</a></li><li><a>第4行</a></li><li><a>第5行</a></li><li><a>第6行</a></li><li><a>第7行</a></li><li><a>第8行</a></li><li><a>第9行</a></li><li><a>第10行</a></li>

<div class="panel-heading">标题</div><div class="panel-body"><div class="btn-group"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#">菜单<span class="caret"></span></a><ul class="下拉菜单"><li><a href="#">Choice1</a></li><li><a href="#">Choice2</a></li><li><a href="#">Choice3</a></li><li class="divider"></li><li><a href="#">选择..</a></li> <p>滑块，迷你旋转木马，开关，手风琴/折叠，导航栏，同位素，牌，莫里斯图表，谷歌图表，字体</p><p></p></div>

<div class="panel panel-default" style="width: 500px;"> <div class="panel-body"> <div style="min-height: 300px; overflow: auto;"> <table style="display: inline-block;"> <thead> <tr> <th> <div class="input-group"> <input class="form-control" /> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu dropdown-menu-right"> <li class="dropdown-submenu"> <a class="text-right">Filter type<span class="glyphicon glyphicon-menu-right"></span></a> <ul class="dropdown-menu"> <li><a>Contains</a></li> <li><a>Equals</a></li> <li><a>Less Than</a></li> <li><a>Greater Than</a></li> </ul> </li> <li><a>Row 1</a></li> <li><a>Row 2</a></li> <li><a>Row 3</a></li> <li><a>Row 4</a></li> <li><a>Row 5</a></li> <li><a>Row 6</a></li> <li><a>Row 7</a></li> <li><a>Row 8</a></li> <li><a>Row 9</a></li> <li><a>Row 10</a></li> </ul> </div> </div> </th> <th> <div class="input-group"> <input class="form-control" /> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu dropdown-menu-right"> <li class="dropdown-submenu"> <a class="text-right">Filter type<span class="glyphicon glyphicon-menu-right"></span></a> <ul class="dropdown-menu"> <li><a>Contains</a></li> <li><a>Equals</a></li> <li><a>Less Than</a></li> <li><a>Greater Than</a></li> </ul> </li> <li><a>Row 1</a></li> <li><a>Row 2</a></li> <li><a>Row 3</a></li> <li><a>Row 4</a></li> <li><a>Row 5</a></li> <li><a>Row 6</a></li> <li><a>Row 7</a></li> <li><a>Row 8</a></li> <li><a>Row 9</a></li> <li><a>Row 10</a></li> </ul> </div> </div> </th> <th> <button type="button" class="btn btn-default">X</button> </th> </tr> </thead> </table> </div> </div> </div>

<div class="panel panel-default"> <div class="panel-heading">Title</div> <div class="panel-body"> <div class="btn-group"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Menu <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">Choice1</a></li> <li><a href="#">Choice2</a></li> <li><a href="#">Choice3</a></li> <li class="divider"></li> <li><a href="#">Choice..</a></li> </ul> </div> <p> slider, mini-carousel, switches, accordion/collapse, navbars, isotope, cards, morris charts, google charts, fonts </p><p> </p></div> </div>