避免引導菜單截斷

Question

我有以下引導菜單中工作正常，但有一個例外：

<li class="dropdown" style="display:inline;float:right;width:160px;"> 
    <a href="javascript:void(0);" data-toggle="dropdown" class="modal-close" 
      aria-haspopup="true" aria-expanded="false"> 
      <i class="fa fa-bars"></i> 
    </a> 
    <ul class="dropdown-menu" style="list-style: none;"> 
     <li><a href="javascript:void(0);" ng-click="deleteMe()">Remove Element</a></li> 
     <li class="menu-item dropdown dropdown-submenu"> 
       <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">Add Element</a> 
       <ul class="dropdown-menu"> 
        <li> 
         <a href="javascript:void(0)" ng-click="addDashElem(101)">Chart</a> 
        </li> 
        <li> 
         <a href="javascript:void(0)" ng-click="addDashElem(104)">Table</a> 
        </li> 
        <li> 
       <a href="javascript:void(0)" ng-click="addDashElem(102)">Gauge</a> 
      </li> 
        <li> 
       <a href="javascript:void(0)" ng-click="addDashElem(103)">Flag</a> 
      </li> 
        <li> 
       <a href="javascript:void(0)" ng-click="addDashElem(103)">Light</a> 
      </li> 
       </ul> 
      </li> 
    </ul> 
</li> 

唯一的例外是，即使沒有要顯示空間的子菜單顯示在右邊，例如當菜單接近屏幕的末尾時，它會被截斷。

這是顯示的內容，在彈出的應該打開左側和不正確的：

如何解決這個問題？

Answer 1

使用拉左，像這樣：

<li class="menu-item dropdown dropdown-submenu pull-left">