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

避免Bootstrap菜单截断

1 个答案: