RTL支持引导3子菜单

Question

我有一个问题调整下拉菜单打开到右侧（软件布局是在希伯来语）。

我看到与提供外部库类似的答案，我不想这样做。我想简单地twick我的CSS了一点，所以它会工作，我几乎没有，这是你能帮助我:)

那些2张图片说明我遇到的问题：

我有三个问题：

1. 改变插入位置向左
2. 改变插入符位置向左移
3. 打开子菜单左侧（此时它打开到离开，但与主要的一个重叠的，但我可以忍受，上述2是更重要的）

在这种link，它是提到bootstrap 3不再支持子菜单，我正在控制它在我的CSS。

**

• HTML

**：

<div ng-show="buildings.total_buildings" tooltip="מגוון פעולות שניתן לבצע על הרשומות שבחרתם" class="btn-group"> 
    <button class="btn btn-default dropdown-toggle btn-lg" data-toggle="dropdown"> 
     <i class="fa fa-lg fa-building "></i> 
     <span class="caret"></span> 
     <span class="badge_success badge">{{buildings.total_buildings}}</span> 
    </button> 
    <ul class="dropdown-menu"> 
     <li> 
      <a href="javascript:void(0);" ng-click="buildings.user.exportHtmlTableToPdf('buildings_table', 'lskd')"><i class="fa fa-file-pdf-o"></i>&nbsp;&nbsp;&nbsp;&nbsp;יצא לקובץ pdf</a> 
     </li> 

     <li class="dropdown-submenu pull-left"> 
      <a href="javascript:void(0);"><i class="fa fa-envelope-o"></i>&nbsp;&nbsp;&nbsp;&nbsp;שלח מייל</a> 
      <ul href="javascript:void(0);" class="dropdown-menu"> 
       <li><a href="javascript:void(0);"><i class="fa fa-building"></i>&nbsp;&nbsp;&nbsp;&nbsp;כולם</a> 
       </li>        
       <li><a href="javascript:void(0);"><i class="fa fa-building owner"></i>&nbsp;&nbsp;&nbsp;&nbsp;בעלים</a> 
       </li> 
       <li><a href="javascript:void(0);"><i class="fa fa-building renter"></i>&nbsp;&nbsp;&nbsp;&nbsp;שוכרים</a> 
       </li> 
       <li><a href="javascript:void(0);"><i class="fa fa-building defecto"></i>&nbsp;&nbsp;&nbsp;&nbsp;דיירים</a> 
       </li> 
      </ul> 
     </li> 

     <li> 
      <a href="javascript:void(0);" ng-click="return"><i class="fa fa-comment-o"></i>&nbsp;&nbsp;&nbsp;&nbsp;שלח סמס</a> 
     </li> 
     <li> 
      <a href="javascript:void(0);" ng-click="return"><i class="fa fa-envelope-o"></i>&nbsp;&nbsp;&nbsp;&nbsp;שלח מייל</a> 
     </li>      
     <li> 
      <a href="javascript:void(0);" ng-click="buildings.showBuildingsData()"><i class="fa fa-male"></i>&nbsp;&nbsp;&nbsp;&nbsp;הצג דיירים</a> 
     </li> 
     <li> 
      <a href="javascript:void(0);" ng-click="return"><i class="fa fa-database"></i>&nbsp;&nbsp;&nbsp;&nbsp;קרא וטען נתונים</a> 
     </li> 
     <li> 
      <a href="javascript:void(0);" ng-click="return"><i class="fa fa-trash-o"></i>&nbsp;&nbsp;&nbsp;&nbsp;מחק </a> 
     </li> 
    </ul> 
</div> 

**

• CSS

**：

.dropdown-submenu { 
    position: relative; 
    text-align: right; 
} 

.dropdown-submenu>.dropdown-menu { 
    top: 0; 
    left: 100%; 
    margin-top: -6px; 
    margin-left: -1px; 
    -webkit-border-radius: 0 6px 6px 6px; 
    -moz-border-radius: 0 6px 6px; 
    border-radius: 0 6px 6px 6px; 
} 

.dropdown-submenu:hover>.dropdown-menu { 
    display: block; 
} 

.dropdown-submenu>a:after { 
    display: block; 
    content: " "; 
    float: right; 
    width: 0; 
    height: 0; 
    border-color: transparent; 
    border-style: solid; 
    border-width: 5px 0 5px 5px; 
    border-left-color: #ccc; 
    margin-top: 5px; 
    margin-right: -10px; 
} 

.dropdown-submenu:hover>a:after { 
    border-left-color: #fff; 
} 

.dropdown-submenu.pull-left { 
    float: right !important; 
} 

.dropdown-submenu.pull-left>.dropdown-menu { 
    right: 100%; 
    margin-left: 10px; 
    -webkit-border-radius: 6px 0 6px 6px; 
    -moz-border-radius: 6px 0 6px 6px; 
    border-radius: 6px 0 6px 6px; 
} 

Answer 1

请看一看这个jsFiddle。我做了你的CSS一些修改和增加了一些新的风格：

.btn-group, .btn-group-vertical { 
    float: right; 
} 
.dropdown-menu { 
    min-width: 190px; 
} 
.dropdown-menu>li>a { 
    text-align: right; 
} 
.dropdown-submenu>a:before { 
    content:'◄'; 
    float: left; 
    margin-left: 0px; 
    color: #ccc; 
    font-size: 10px; 
    margin-top: 3px; 
} 
.dropdown-submenu>a:after { 
    display: none; 
} 
.dropdown-submenu>a:hover:before { 
    color: #fff; 
}