Question

我在面板中有一个bootstrap下拉菜单。我的问题是它不能很好地处理当菜单命中面板边界时发生的事情。例如，如果它碰到底部边框，我更喜欢它滚动。此外，更重要的是，如果它离开屏幕的右侧，我更喜欢它左转而不是忽略面板边界并走出面板。

举个例子，请看以下小提琴。单击下拉按钮以查看菜单。将鼠标悬停在＆＃34;过滤器类型＆＃34;获取右侧菜单的选项。特别是，请注意第一个下拉列表与第二个下拉列表中的“过滤器类型”子菜单。

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

Answer 1

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

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

Answer 2

Updated your fiddle

只需将class="dropdown-submenu pull-left"添加到要在左侧打开的下拉菜单中，然后添加以下css id=main_sub添加到要左对齐的子菜单。

#main_sub > .dropdown-menu{
position: absolute;
left: 0;

top: 0;
margin-left: -150px;
}

面板内的Bootstrap下拉菜单

2 个答案: