Bootstrap rtl(从右到左)输入组 [英] Bootstrap rtl (right to left) input groups

问题描述

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

显然 border-radius 是错误的，我可以用 CSS 修复它，但我想知道 Bootstrap 是否有本地方法来处理它.

这是我的代码:

<输入类型="文本"lang="fa" dir="rtl"class="表单控件"/><span class="input-group-btn"><button ng-click="editor.removeQuestion(question)"标题="删除问题"class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span></span>

解决方案

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

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

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

<span class="input-group-btn"><button ng-click="editor.removeQuestion(question)"标题="删除问题"class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span></span><input type="text" lang="fa" dir="rtl" class="form-control"/>

I'm developing a page in an rtl language and Bootstrap's input-group looks like this:

Obviously the border-radius is on the wrong side and I can fix it with CSS but I'm wondering if Bootstrap has a native way to deal with it.

Here is my code:

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

解决方案

You have all the components there, just in the wrong order :)

You want your span to come before your input element if you want it on the left side of the input. Also, you don't need the dir="rtl" attribute on the input-group element (the outer div), only on the input element itself.

So you would just need to change your code to the following:

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

这篇关于Bootstrap rtl(从右到左)输入组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！