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>