引导4文件输入标签列

Question

我正在尝试使用Bootstrap4创建一个表单。但是文件输入的标签溢出了列。我找不到一个方法使它适合这个专栏。有没有一种引导方式或自定义css可以实现这一点？

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

<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

只要给m-0（边距： 0；）行总是因为它给水平滚动条在您的代码有时。

你有。不是的子级的行类。容器或容器。容器液体。引导需要。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>

Answer 2

您需要分离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/