引导文件上传宽度更改防止

Question

我正在使用Fileupload进行Bootstrap fileupload，我的问题是当我上传文件，然后在文本框中显示文件名，但文本框大小发生变化时。我该如何预防。我在w3school中使用的https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_form_custom_file&stacked=h。这是我的HTML代码

<div class="custom-file mb-3 ">
  <input type="file" class="custom-file-input" id="customFile" name="filename">
   <label class="custom-file-label" for="customFile">Choose file</label>
 </div>

这是我的JS代码

$(".custom-file-input").on("change", function () {
    //$('.custom-file-input').css('width', '1000px');
    var fileName = $(this).val().split("\\").pop();

    $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
    //$('.custom-file-input').css('width', '1000px');
});

我检查并发现此代码负责宽度更改

$(this).siblings(".custom-file-label").addClass("selected").html(fileName);

如何防止这种情况？

我在此处上传图片以解决问题：

在我上传文件后，我得到了该文件上传宽度的更改：

Answer 1

尝试更改标签宽度：

width: -webkit-fill-available;