翻译自定义文件输入Bootstrap 4

Question

我正在使用bootstrap并遵循以下文档：

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

即使lang="es"添加了属性，输入文本也不会被翻译。

这里有一个Codepen，我想念什么？

https://codepen.io/anon/pen/ZxGNrw

Answer 1

那么，实现这一目标的最佳方法就是覆盖 CSS 伪类 ::after

.custom-file-label::after { content: "Charger";}

Answer 2

这是因为Bootstrap SASS没有导入到Codepen中。首先，您需要@import "bootstrap/functions"（因为$ custom-file-text（）所在的位置）进行更改，最后@import "bootstrap"...。

@import "bootstrap/functions";

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

@import "bootstrap";

我不知道将Bootstrap SASS导入Codepen的方法，但这是Codeply上的一个有效示例：https ://www.codeply.com/go/2Mo9OrokBQ

相关问题：
Bootstrap 4文件输入