引導RTL（從右到左）輸入組

我正在開發一個頁面在RTL語言和引導的input-group看起來是這樣的：引導RTL（從右到左）輸入組

顯然border-radius是在錯誤的一邊，我可以修復它與CSS，但我想知道如果Bootstrap有一個本地的方式來處理它。

這裏是我的代碼：

<div class="input-group" lang="fa" dir="rtl"> 
      <input type="text" 
        lang="fa" dir="rtl" 
        class="form-control"/> 
      <span class="input-group-btn"> 
       <button ng-click="editor.removeQuestion(question)" 
         title="Remove question" 
         class="btn btn-danger"> 
        <span class="glyphicon glyphicon-remove"></span> 
       </button> 
      </span> 
</div>

來源

2015-08-08 AlexStack

它看起來不錯，我在此[小提琴]（HTTP：/ /jsfiddle.net/vqzjowmg/），你可以給我們你的完整代碼，或只是給我們一個問題的小提琴嗎？ –

http://jsfiddle.net/vqzjowmg/1/ – AlexStack

你必須有所有的組件，只是在錯誤的順序:)

您希望您的跨度來你輸入元素之前，如果你想它的輸入的左側。此外，您不需要input-group元素（外部div）上的dir="rtl"屬性，僅在輸入元素本身上。

所以，你只需要在你的代碼更改爲以下：

<div class="input-group"> 
    <span class="input-group-btn"> 
     <button ng-click="editor.removeQuestion(question)" 
       title="Remove question" 
       class="btn btn-danger"> 
      <span class="glyphicon glyphicon-remove"></span> 
     </button> 
    </span> 
    <input type="text" lang="fa" dir="rtl" class="form-control"/> 
</div>

來源

2015-08-08 19:18:21

這裏是一個有效的解決方案：

.input-group { 
    direction:rtl !important; 
} 

.input-group-btn:last-child >.btn { 
    border-top-right-radius: 0 !important; 
    border-bottom-right-radius: 0 !important; 
    border-top-left-radius: 4px !important; 
    border-bottom-left-radius: 4px !important; 
    border-right:0px !important; 
    border-left:1px !important; 

} 

.input-group .form-control:first-child { 
    border-top-right-radius: 4px !important; 
    border-bottom-right-radius: 4px !important; 
    border-top-left-radius: 0px !important; 
    border-bottom-left-radius: 0px !important; 

}

來源

2016-03-09 19:32:13 eladcm

引導RTL（從右到左）輸入組

回答

相關問題