Css 如何增加上传文件表单的大小

我有一个问题，我有一个表单，在这个表单上有一个文件上传字段，在这个字段里面有上传文件的名称（我会放一个屏幕截图来显示这部分），但是如果我上传的图像超过了B 3，就会断线，文件名不会在同一行对齐，我想一个可能的解决办法，这是增加字段的大小或其他东西（idk尚未），所以如果你们能帮助我，我非常感谢

字段的IMG重载：

代码：

---

必须增加列值以增加上载字段的宽度。 如果您不想更改col-4，那么将字段放在一个容器中，给它一个类并添加一个css属性overflow:hidden

<style>
.custom-file{
   overflow:hidden;
}
</style>

<div class="col-4">
            <div class="custom-file">
             <%= f.file_field :images, multiple: true, placeholder: "Choose file", class: 'file-upload-field' %>
          </div>
</div> 

.自定义文件{
溢出：隐藏；
}

我做了溢出：隐藏在css中，但字段现在非常小，我应该在自定义文件类中包含css属性吗？是，在名为custom file的容器上添加css属性，您可以找到上面的代码。它在容器中使用您的动态字段，您需要向容器添加属性，而不是字段。我正在放置css属性（高度和宽度）在自定义文件类中，但它不会更改字段中的任何内容以更改字段宽度，因为它在col-4中限制它。您需要将col-4更改为col-6或大于4的值。这将允许您的字段增加其宽度。抱歉，idk发生了什么，但字段仍然没有更改，也许我没有提到这个col-4容器，它也在t-5行容器的内部，它会影响什么吗？

<style>
.custom-file{
   overflow:hidden;
}
</style>

<div class="col-4">
            <div class="custom-file">
             <%= f.file_field :images, multiple: true, placeholder: "Choose file", class: 'file-upload-field' %>
          </div>
</div>