Bootstrap rtl(从右到左)输入组

Question

我正在用rtl语言开发一个页面,Bootstrap input-group看起来像这样:

显然这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>

Answer 1

你有所有的组件,只是在错误的顺序:)

如果您希望在输入的左侧显示跨度,则希望跨度位于输入元素之前.此外,您不需要元素(外部div)dir="rtl"上的属性input-group,只需要输入元素本身.

因此,您只需将代码更改为以下内容:

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

Answer 2

这是一个有效的解决方案：

 .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-width:0px !important;
   border-left-width: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;

 }