表单文件与其余表单不对齐

Question

因此，在尝试将文件选择添加到我的bootstrap（4.1.3）表单中时遇到一些问题。看起来与表格的其余部分

我尝试使用getbootstrap.com中的示例文件格式，尽管它们看起来更进一步，这是我自己能得到的最接近的文件

<!-- this one works just fine -->
<div class="form-group row">
    <label for="titel" class="col-4 col-form-label">Titel van Email</label>
    <div class="col-8">
        <input id="titel" name="titel" type="text" required="required" class="form-control">
    </div>
</div>
<!-- this one looks off -->
 <div class="form-group row">
     <label class="filel" class="col-4 col-form-label">Choose image file...</label>
    <div class="col-8">
        <input type="file" class="form-control" id="customFile" name="myImage">
    </div>
 </div>

这是结果的屏幕截图

Answer 1

  

这是您的解决方案

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


 <div class="form-group row">
     <label for="titel" class="col-4 col-form-label">Titel van Email</label>
     <div class="col-8">
         <input id="titel" name="titel" type="text" required="required" class="form-control">
     </div>
 </div>

 <!-- This is your fixed code -->
 <div class="form-group row">
      <label class="file1 col-4 col-form-label">Choose image file...</label>
      <div class="col-8">
          <input type="file" class="form-control" id="customFile" name="myImage">
      </div>
 </div>

Answer 2

该错误是由于在带有类file1的标签中两次添加class属性引起的。

 <div class="form-group row">
     <label for="titel" class="col-4 col-form-label">Titel van Email</label>
     <div class="col-8">
         <input id="titel" name="titel" type="text" required="required" class="form-control">
     </div>
 </div>
 <!-- fixed -->
 <div class="form-group row">
      <label class="file1 col-4 col-form-label">Choose image file...</label>
      <div class="col-8">
          <input type="file" class="form-control" id="customFile" name="myImage">
      </div>
 </div>