Bootstrap 4 带有自定义文件文本的多个自定义文件对话框？答案

【问题标题】：Bootstrap 4 multiple custom-file dialogs with custom-file-text?Bootstrap 4 带有自定义文件文本的多个自定义文件对话框？
【发布时间】：2017-12-23 03:21:44
【问题描述】：

我的站点上的 bootstrap 4 中有多个自定义文件对话框。我知道如何通过 scss 变量设置自定义文件文本，如下所示：

$custom-file-text: (
    placeholder: (
      en: "Choose file...",
      es: "Seleccionar archivo...",
      de: "Datei wählen..."
    ),
    button-label: (
      en: "Browse",
      es: "Navegar",
      de: "Durchsuchen"
    )
  );

但这将应用于我所有可用的自定义文件对话框。如何单独设置每个自定义文件对话框的文本？

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

如果您只想更改占位符而不是按钮标签，一个非常简单的技巧是在 .custom-file-control <span> 中输入文本：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

<label class="custom-file">
  <input type="file" id="file2" class="custom-file-input">
  <span class="custom-file-control">Ermagherd!</span>
</label>

话虽如此...值得考虑您是否应该更改此处提供的值，因为任何与单击此组件的用户应该期望出现文件窗口的明确指示的偏差都可能导致混乱。

注意：StackOverflow 似乎没有正确渲染custom-file 组件；您可以在 Bootply 上查看相同的代码：https://www.bootply.com/IcMAXzCHxj

【讨论】：

这是一个非常简单的解决方案 - 谢谢。但是我也可以在我的 sass 文件中使用全局变量 $custom-file-text 来做到这一点。就像将自定义类附加到自定义文件控制跨度类？如果是，我该怎么做？
对于那个答案，您可能想阅读这个 SO 问题，因为它似乎随着 Bootstrap 4 的每次迭代而改变：stackoverflow.com/questions/31329177/…