避免引导菜单截断

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