Question

我正在使用bootstrap并遵循此doc：

<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

这是因为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 File Input

Answer 2

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

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

Answer 3

如果覆盖 CSS，最好使用 ":lang()" 选择器将标签仅应用于给定语言：

.custom-file-input:lang(fr) .custom-file-label::after {
    content: "Parcourir";
}

翻译自定义文件输入Bootstrap 4

3 个答案: