Twitter bootstrap 引导4输入组RTL问题

我需要制作一个引导v4页RTL

当我添加

dir=“rtl”

属性时，

输入组

元素样式被弄乱了：

@


@example.com


你的虚荣网址
https://example.com/users/


$
.00


$
0

因为RTL支持将在稍后提供-：

没有，但别担心，考虑到人们要求RTL的次数，我们不会很快忘记它。但我们不会因此而延迟v4.0.0。RTL可能会在稍后的小版本中发布（例如v4.2.0）

我已经创建了一个CSS片段，它修复了

输入组

元素的RTL问题：

[dir="rtl"] .input-group-addon:not(:last-child){
  border-right: 1px solid rgba(0,0,0,.15);
  border-left: 0;
}

[dir="rtl"] .input-group .form-control:not(:last-child),
[dir="rtl"] .input-group-addon:not(:last-child),
[dir="rtl"] .input-group-btn:not(:first-child)>.btn-group:not(:last-child)>.btn,
[dir="rtl"] .input-group-btn:not(:first-child)>.btn:not(:last-child):not(.dropdown-toggle),
[dir="rtl"] .input-group-btn:not(:last-child)>.btn,
[dir="rtl"] .input-group-btn:not(:last-child)>.btn-group>.btn,
[dir="rtl"] .input-group-btn:not(:last-child)>.dropdown-toggle{
  border-bottom-right-radius: .25rem;
  border-top-right-radius: .25rem;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

[dir="rtl"] .input-group .form-control:not(:first-child),
[dir="rtl"] .input-group-addon:not(:first-child),
[dir="rtl"] .input-group-btn:not(:first-child)>.btn,
[dir="rtl"] .input-group-btn:not(:first-child)>.btn-group>.btn,
[dir="rtl"] .input-group-btn:not(:first-child)>.dropdown-toggle,
[dir="rtl"] .input-group-btn:not(:last-child)>.btn-group:not(:first-child)>.btn,
[dir="rtl"] .input-group-btn:not(:last-child)>.btn:not(:first-child){
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: .25rem;
  border-top-left-radius: .25rem;
}

[dir="rtl"] .form-control + .input-group-addon:not(:first-child){
  border-left: 1px solid rgba(0,0,0,.15);
  border-right: 0;
}

[dir="rtl"] .input-group .form-control:not(:first-child):not(:last-child),
[dir="rtl"] .input-group .input-group-addon:not(:first-child):not(:last-child){
  border-radius: 0;
}

检查代码段：

[dir=“rtl”]。输入组加载项：非（：最后一个子项）{
右边框：1px实心rgba（0,0,0,15）；
左边框：0；
}
[dir=“rtl”].输入组.表单控件：非（：最后一个子项），
[dir=“rtl”]。输入组加载项：非（：最后一个子项），
[dir=“rtl”]。输入组btn:不（：第一个子项）>。btn组：不（：最后一个子项）>。btn，
[dir=“rtl”]。输入组btn:not（：第一个子项）>。btn:not（：最后一个子项）：not（.dropdown toggle），
[dir=“rtl”].输入组btn:not（：last child）>.btn，
[dir=“rtl”].输入组btn:not（：last child）>.btn group>.btn，
[dir=“rtl”]。输入组btn:not（：last child）>。下拉切换{
边框右下半径：.25rem；
边框右上角半径：.25rem；
边框左下半径：0；
边框左上半径：0；
}
[dir=“rtl”].输入组.表单控件：非（：第一个子项），
[dir=“rtl”]。输入组加载项：非（：第一个子项），
[dir=“rtl”].输入组btn:不是（：第一个子项）>.btn，
[dir=“rtl”].输入组btn:not（：first child）>.btn group>.btn，
[dir=“rtl”]。输入组btn:not（：first child）>。下拉切换，
[dir=“rtl”]。输入组btn:不（：最后一个子项）>。btn组：不（：第一个子项）>。btn，
[dir=“rtl”]。输入组btn:非（：最后一个子项）>。btn:非（：第一个子项）{
边框右下半径：0；
边框右上角半径：0；
边框左下半径：.25rem；
边框左上半径：.25rem；
}
[dir=“rtl”].表单控件+.输入组加载项：非（：第一个子项）{
左边框：1px实心rgba（0,0,0,15）；
右边界：0；
}
[dir=“rtl”].输入组.表单控件：非（：第一个子项）：非（：最后一个子项），
[dir=“rtl”]。输入组。输入组加载项：不（：第一个子项）：不（：最后一个子项）{
边界半径：0；
}

@


@example.com


你的虚荣网址
https://example.com/users/


$
.00


$
0