翻译自定义文件输入 Bootstrap 4答案

【问题标题】：Translating custom-file input Bootstrap 4翻译自定义文件输入 Bootstrap 4
【发布时间】：2018-08-20 10:21:05
【问题描述】：

我正在使用引导程序并遵循此文档：

<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

【问题讨论】：

标签： css twitter-bootstrap sass bootstrap-4

【解决方案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

【讨论】：

您确定在导入引导程序时没有覆盖$custom-file-text？
@MarcosDiPaolo 是的，因为如果您查看引导程序 scss 文件，您会发现它正在使用 !default

【解决方案2】：

嗯，实现这一点的最好方法就是覆盖 CSS 伪类 ::after

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

【讨论】：

又快又脏 +1 :-)
.custom-file-input:lang(fr) .custom-file-label::after { content: "Parcourir"; }

【解决方案3】：

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

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

【讨论】：