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/

Answer 2

总是总是将m-0（margin：0;）赋予row，因为有时它会在代码中提供水平滚动条。

您拥有的.row类不是.container或.container-fluid的子级。 Bootstrap要求.row是.container或.container-fluid的直接子代，因为.row具有负的左/右边界，可在.container和.container-fluid中的左/右填充内起作用。因此，.row上的负边距会创建水平滚动条，为此，您需要为元素添加m-0。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="form-group row m-0">
     <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>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>