引导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（从右到左）输入组

回答

相关问题