Файл формы не совпадает с остальной частью формы

Question

Так что у меня возникли некоторые проблемы при попытке добавить выбор файла в мою форму начальной загрузки (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.

 <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>