引导程序文件输入按钮

Question

我正在尝试使用Bootstrap 4创建一个文件上传按钮，但我停留在该特定部分。该按钮应该显示为[Browse]，然后在上传后，更改为文件名[name.txt]，但在页面上仅显示

浏览[选择文件] name.txt

我认为按钮本身的包装（？）存在问题。它应该是一个蓝色按钮，上面写着“浏览”，并在输入时更改文件名，但是对我来说，它溢出到“选择文件”按钮之外。 这是供参考的代码。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<form class="form-horizontal">
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <label class="file-upload btn btn-primary">
                    Browse  <input type="file" />
                </label>
    </div>
  </div>
</form>

这是为按钮实现的唯一代码，除了少量javascript会在输入文件时更改文件名。如果有人可以指出解决方案的方向，那就太好了。预先感谢！