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 (页边距: 0；)赋给row，因为它有时会在代码中显示水平滚动条。

您拥有的容器类不是.container或.container- .row的子类。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>

​