css - 我如何使表单输入 rtl 没有很多重复项

Question

如果区域设置如何使表单 RTL 不是英语，有没有一种方法可以更改 CSS 中的区域设置，而不是为每个输入重复大量代码以使其 RTL，如果条件为真？

例如:

    <div class="form-group" id="form-group-name">
    <label for="name" class=" control-label {{ app()->getLocale() == 'ar' ? 'float-right' : ''}}">{{ __('user.User') }}</label>
    <div class="col-sm-12">
        <input type="text" id="name" name="name"
               value="{{ isset($user->name) ? $user->name :'' }}" maxlength="50" required=""
               class="form-control {{ app()->getLocale() == 'ar' ? 'text-right' : ''}}">
        <span style="color: red" class="help-block {{ app()->getLocale() == 'ar' ? 'float-right' : ''}}"></span>
    </div>

</div>

我不想在每个输入中重复所有条件。

Answer 1

如果您使用的是 bootstrap4，只需将文档的方向更改为 RTL

所以你必须这样做

body {direction:rtl} 

在“RTL 方向”的外部 rtl css 文件中，将其放在要覆盖的主要 css 样式之后。

另一种方法是在主 css 文件的末尾编写 rtl 样式 css 数据，但通过与 rtl 版本相关的任何 html 属性检测每个类

喜欢:

html[lang="ar"] body {
  direction:rtl
}
/* the same for any other elements */
html[lang="ar"] .class-name {
  padding-left:0;
  padding-right:20px
}