面板中的 Bootstrap 下拉菜单 [英] Bootstrap dropdown menu within a panel

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

问题描述

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

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

http://jsfiddle.net/w976zooe/

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

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

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

    </th><th><button type="button" class="btn btn-default">X</button></th></tr></thead>

    解决方案 

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

    示例:http://www.bootply.com/Owj9ZxXgYL

    I have a bootstrap dropdown menu within a panel. My problem is that it is not nicely handling what happens when the menu hits a panel boundary. For instance, if it hits the bottom border, I'd prefer it to scroll. Also, more importantly, if it goes off the right side of the screen, I'd prefer it to either go left instead or even ignore the panel boundaries and go outside the panel.

    As an example, see the following fiddle. Click the dropdown buttons to see the menu. Hover over the "Filter Type" option to get the menu that goes to the right. In particular, note the Filter Type submenu on the first dropdown vs the second one.

    http://jsfiddle.net/w976zooe/

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

    Example: http://www.bootply.com/Owj9ZxXgYL

    这篇关于面板中的 Bootstrap 下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

    查看全文
    相关文章
    其他开发最新文章
    热门教程
    热门工具
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆