Html 引导4中未显示自定义文件输入标签

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

<label class="w-100">label 1
  <input type="file" class="custom-file-input">
  <label class="custom-file-label">label 2</label>
</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>

标签1 标签2

---

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

我只编写了一个基本的引导4自定义文件标签代码，希望它能帮助您。谢谢

标签1
标签2

只需运行以下命令：

$（.custom file input”）.on（“更改”，函数（）{
var fileName=$（this.val（）.split（“\\”）.pop（）；
$（this）.sides（“.custom file label”）.addClass（“selected”）.html（文件名）；
});

选择文件
如果您需要支持多个文件选择（使用
multiple
属性），以下是相关代码

$('.custom-file-input').on('change', function () {
    let fileName = Array.from(this.files).map(x => x.name).join(', ')
    $(this).siblings('.custom-file-label').addClass("selected").html(fileName);
});

很抱歉，我现在看到了这两个标签，但是我得到了一个警告，这里不允许，当我在标签1周围放置
label 1
时，它会破坏其他html代码。。你确定这是正确的吗？当我使用时，我没有得到错误，但标签在输入上方的位置不同，如我的示例中的
标签3
，这会破坏表单的布局。。有什么想法吗？我只是根据你的要求更新代码。只需在
标签中添加
自定义文件
类
即可解决问题。谢谢你的帮助。但是当我将你的代码粘贴到我的模板中时，我看不到标签1。你能分享链接以获得更多澄清吗？谢谢，我认为这个javascript解决方案对于这个问题来说有点过火了，但还是要感谢你的回答。你真的不需要jQueryNotice，它不处理带有
multiple
属性的输入，在这里你可以选择多个文件。很好的解决方案：）
$('.custom-file-input').on('change', function () {
    let fileName = Array.from(this.files).map(x => x.name).join(', ')
    $(this).siblings('.custom-file-label').addClass("selected").html(fileName);
});