防止Bootstrap文件上传宽度更改

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;