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

您在那里拥有所有组件，只是顺序错误:)

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

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

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