面板中的引导程序下拉菜单

面板中有一个引导程序下拉菜单。我的问题是，它不能很好地处理菜单碰到面板边界时发生的情况。例如，如果它击中底部边框，我宁愿它滚动。另外，更重要的是，如果它离开屏幕的右侧，我宁愿它向左移动，甚至忽略面板边界并走出面板。面板中的引导程序下拉菜单

作为一个例子，请看下面的小提琴。点击下拉按钮以查看菜单。将鼠标悬停在“过滤器类型”选项上可以看到右侧的菜单。特别要注意的是第一个下拉列表中的Filter Type子菜单。

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

来源

2017-03-02 Chris

<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

来源

2017-03-02 15:51:42 JMF

这有助于让我知道，这是溢出属性，把我扔了。谢谢！ – Chris

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

来源

2017-03-02 16:54:50 neophyte

面板中的引导程序下拉菜单

回答

相关问题