RTL应用中Bootstrap-Vue b-form-input校验警告图标移至左侧方法咨询

解决方法 #

Bootstrap默认的表单校验图标定位规则没有自动适配RTL布局，你可以通过覆盖样式调整图标位置：

1. 针对你当前的业务代码，添加以下CSS即可生效：

/* 调整RTL下错误警告图标到左侧 */
div .modal-input.is-invalid {
  /* 把背景图标定位到左侧 */
  background-position: left calc(.375em + .1875rem) center !important;
  /* 左侧留出图标位置 */
  padding-left: calc(1.5em + .75rem) !important;
  /* 取消右侧原本给图标预留的间距 */
  padding-right: 0.75rem !important;
}

/* 如需同时适配成功状态的图标，可添加以下代码 */
div .modal-input.is-valid {
  background-position: left calc(.375em + .1875rem) center !important;
  padding-left: calc(1.5em + .75rem) !important;
  padding-right: 0.75rem !important;
}

2. 如果你需要全局适配所有RTL布局下的表单校验图标，可以把选择器调整为全局通用规则：

[dir="rtl"] .form-control.is-invalid,
[dir="rtl"] .form-control.is-valid {
  background-position: left calc(.375em + .1875rem) center !important;
  padding-left: calc(1.5em + .75rem) !important;
  padding-right: 0.75rem !important;
}

如果样式未生效，可检查选择器优先级，或者给.modal-input外层加自定义类名后再加深选择器权重即可。

内容的提问来源于stack exchange，提问作者vesii