如何在RTL应用程序中使用Bootstrap-Vue的表单文件输入小部件？

Answer 1

我对上面 Tim 的解决方案做了一些更改，以提供一些清晰度。

在下面链接的功能齐全的示例中，我对上面 Tim 提供的示例做了一些细微的更改。

1. 添加了注释，以更好地告知如何应用按钮“右侧”的填充来为占位符文本提供适当的间距
2. 使用您的类和嵌套 SCSS 以避免任何混淆
3. 添加了

   ::v-deep

   ，以防您的样式块有范围（因为它们应该适用于组件）
4. 使用占位符语言和文本来完全可视化完整的解决方案

工作示例的屏幕截图（来自下面的 Stackblitz 链接）：

可以在此处查看工作示例： https://stackblitz.com/edit/vue2-vue-cli-ozudwg?file=src/App.vue

注意：您提到添加额外的库来帮助解决此问题，但无济于事。如果应用这些代码更改后它仍然不起作用。请首先检查这些软件包的版本是否不匹配，并报告任何不一致的情况。

  "devDependencies": {
    "@vue/cli-service": "^4.5.13",
    "sass": "^1.22.10",
    "sass-loader": "^7.2.0",
    "vue-template-compiler": "^2.6.14"
  },
  "dependencies": {
    "bootstrap": "4.5.3",
    "bootstrap-vue": "2.21.2",
    "vue": "^2.6.14"
  }

如果全部检查完毕，请暂时删除您可能已安装的所有软件包。如果它有效，我们就会知道该软件包以某种方式干扰了。

如果删除包时解决方案有效，但您的应用程序的其他区域需要该包，请重新安装包并回发在浏览器中生成的渲染 HTML，同时获取相关渲染的 CSS。这可以使用 Chrome 开发工具并检查元素来完成。

Answer 2

这应该可以解决问题：

.custom-file-label:after {
   left: 0;
   right: unset;
   border-right: inherit;
   border-left: unset;
   border-radius: 0;
}

.custom-file-label {
   padding-left: 75px; // adjust as needed
}

这是一个 CodeSandbox