Bootstrap rtl(从右到左)输入组

rt4zxlrg 于 2023-08-01 发布在 Bootstrap

关注(0)|答案(4)|浏览(133)

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

的数据
显然border-radius是在错误的一边，我可以修复它与CSS，但我想知道，如果引导有一个原生的方式来处理它。
下面是我的代码：

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

字符串

twitter-bootstrap

来源：https://stackoverflow.com/questions/31891405/bootstrap-rtl-right-to-left-input-groups

4条答案

按热度按时间

tf7tbtn21#

你有所有的组件在那里，只是顺序不对：）
如果希望span位于input的左侧，则希望span位于input元素之前。此外，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>

字符串

赞(0）回复(0）举报 2023-08-01

gudnpqoy2#

下面是一个工作解决方案：

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

 }

字符串

赞(0）回复(0）举报 2023-08-01

mu0hgdu03#

另一个对我有效的解决方案，但这个是Bootstrap 4。而且没有必要改变任何css。

<div class="input-group w-100" dir="ltr">
            <div class="input-group-prepend">
              <button class="btn btn-outline-secondary" type="button" style="background-color: #fff;">
                <i class="fa fa-search"></i>
              </button>
            </div>
            <input type="text" class="form-control border-dark" placeholder="گەڕان" />

          </div>

字符串

赞(0）回复(0）举报 2023-08-01

ctzwtxfj4#

对我有效的技巧是只使用bootstrap.rtl.min.css而不使用ltr版本bootstrap.min.css！

赞(0）回复(0）举报 2023-08-01