패널 내의 부트 스트랩 드롭 다운 메뉴

Question

패널 내에 부트 스트랩 드롭 다운 메뉴가 있습니다. 제 문제는 메뉴가 패널 경계에 도달했을 때 어떤 일이 발생하는지 잘 처리하지 못한다는 것입니다. 예를 들어 아래쪽 테두리에 닿으면 스크롤하는 것이 좋습니다. 더 중요한 것은 화면의 오른쪽에서 벗어난 경우 왼쪽으로 이동하거나 패널 경계를 무시하고 패널 외부로 이동하는 것이 좋습니다.

예를 들어 다음 피들을 참조하십시오. 메뉴를 보려면 드롭 다운 버튼을 클릭하십시오. '필터 유형'옵션 위로 마우스를 가져 가면 오른쪽으로 이동하는 메뉴가 표시됩니다. 특히 첫 번째 드롭 다운의 Filter Type 하위 메뉴와 두 번째 드롭 다운의 Filter Type 하위 메뉴를 확인하십시오.

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> 

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

그냥 추가 된 id=main_sub CSS 다음은 왼쪽에서 열고 추가 할 하위 메뉴를 드롭 다운에 class="dropdown-submenu pull-left"를 추가 왼쪽 정렬 할 하위 메뉴로 이동합니다.

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

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