引导文件上传宽度更改预防答案

【问题标题】：Bootstrap fileupload width change prevention引导文件上传宽度更改预防
【发布时间】：2019-08-08 06:04:48
【问题描述】：

我正在使用文件上传来引导文件上传我的问题是当我上传文件然后文件名显示在文本框中但文本框大小发生变化时。我怎样才能防止这种情况。我在 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);

如何防止这种情况发生？

我在这里上传图片以澄清我的问题：

在我上传文件后，我得到了这个文件上传宽度变化：

【问题讨论】：

您想拆分文件名以使其适合框内吗？还是您希望上传框的宽度不改变？
在此处添加您的 HTML 代码
我想在盒子里添加文件名，没问题，但盒子大小改变了，这是个问题
@Lalji Tadhani 我已经给出了你想要的 HTML 代码
喜欢（促销文字和时间限制）HTML块

标签： jquery html twitter-bootstrap bootstrap-4

【解决方案1】：

尝试改变标签宽度：

width: -webkit-fill-available;

【讨论】：