Bootstrap 4 文件输入标签 Oveflows 列

Question

我正在尝试使用 Bootstrap 4 创建一个表单。但是文件输入的标签溢出了列。我找不到使它适合列的方法。是否有可以实现此目的的引导程序方式或自定义 css？

编辑：很抱歉我的问题没有得到很好的解释。我所说的标签是指文件输入中的标签。那就是“选择文件...”。可以看出，图像中的文件输入在右侧溢出。它与其余的输入字段不对齐。

<div class="form-group row">
     <label for="image-upload" class="col-sm-3 col-form-label">Resim Yükle (5:3 Oranl?)</label>

     <div class="custom-file col-sm-9">
           <input type="file" class="custom-file-input" id="image-upload" required>
           <label class="custom-file-label" for="image-upload">Choose file...</label>
           <div class="invalid-feedback">Example invalid custom file feedback</div>
     </div>
              <!--<div id="uploaded-images"></div> id=cover-image-input-->
</div>

Answer 1

您需要将 col-sm-9 和自定义文件 div 分开。

<div class="col-sm-9">
    <div class="custom-file">
        <input type="file" class="custom-file-input form-control" id="image-upload" required>
        <label class="custom-file-label" for="image-upload">Choose file...</label>
        <div class="invalid-feedback">Example invalid custom file feedback</div>
    </div>
</div>

https://jsfiddle.net/qdfy91r5/1/

此外，如果您使用 m-0 解决方案，它会破坏每一行周围的边距。该答案仅在一行场景中显示，但您有多行，它们会将它们全部挤压在一起，如下面的小提琴所示，将我的答案与他的答案进行了比较：

https://jsfiddle.net/qdfy91r5/2/