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; 
}