html - bootstrap 4 中未显示自定义文件输入标签

Question

我尝试使用 bootstrap 4 在自定义文件输入字段上方显示一个标签，并在其中显示另一个标签。我尝试了以下操作，但未显示 label 1。

<label class="w-100">label 1
  <input type="file" class="custom-file-input">
  <label class="custom-file-label">label 2</label>
</label>

当我以这种方式标记普通输入字段时，标签 3 按预期显示。

<label class="w-100">label 3
  <input type="text" class="form-control">
</label>

有谁知道为什么不显示标签1以及我应该如何显示标签1和标签2？非常感谢。

实际起作用的是:

<label for="some-id" class="w-100">label 1</label>
<div class="custom-file" style="margin-top:-1.5em" id="some-id">
  <input type="file" class="custom-file-input">
  <label class="custom-file-label">label 2</label>
</div>

但负边距似乎是一个糟糕的解决方案。如果没有它，标签将显示为高。

Answer 1

只需运行这个:

$(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile">
    <label class="custom-file-label" for="customFile">Choose file</label>
  </div>
</form>