legenda não incorporada para entrada no bootstrap 4

estou a usar Bootstrap 4 e Vue.js para preencher um formulário de entrada, mas eu não consigo descobrir como fazer a etiqueta estar na linha, e antes, com o arquivo de tipo de entrada.

<div v-for="problem in problems">
    <div class="row">
        <div class="col">
            <form method="POST" action="/submission" enctype="multipart/form-data" class="form-group">
                <!-- sending the student information -->
                <input type="text" name="courseNumber" :value="courseIdSelected" style="display: none;">
                <input type="text" name="assignmentNumber" :value="assignmentSelected.id" style="display: none;">
                
                <div class="form-group form-inline">
                    <label :for="problem.name">Code submissions {{ problem.name }}</label>
                    <input type="file" name="document" :id="problem.name" class="form-control-file"/>
                </div>
                <div class="form-group">
                    <input type="submit" class="btn btn-primary"/>
                </div>
            
            </form>
        </div>
    </div>
</div>

Existe alguma solução usando apenas uma classe de Bootstrap , ou eu precisaria de mudar o estilo (CSS) para que ele mostrasse a legenda na mesma linha que a entrada.

Aqui está uma imagem:

screenshot of the issue (html label is not inline with the input)

Author: Luca C, 2020-06-24
Source

3 answers

Amostra de BS4 em linha: 

  <div class="form-group row"> 
    <label :for="problem.name" class="col-sm-2 col-form-label">Code submissions {{ problem.name }}</label>
    <div class="col-sm-10"> 
<input type="file" name="document" :id="problem.name" class="form-control"/>
    </div>
  </div>
 2
Author: foadabd, 2020-06-24 05:45:20

Se você fizer a entrada dentro do rótulo, isso ajudá-lo-á a resolver o seu problema

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div >
    <div class="row">
        <div class="col">
            <form method="POST" action="/submission" enctype="multipart/form-data" class="form-group">
                <!-- sending the student information -->
                <input type="text" name="courseNumber" :value="courseIdSelected" style="display: none;">
                <input type="text" name="assignmentNumber" :value="assignmentSelected.id" style="display: none;">
                
                <div class="form-group form-inline">
                    <label :for="problem.name">
                    <input type="file" name="document" id="problem.name" class="form-control-file"/>
                    Code submissions {{ problem.name }}
                    </label>
                </div>
                <div class="form-group">
                    <input type="submit" class="btn btn-primary"/>
                </div>
            
            </form>
        </div>
    </div>
</div>
 1
Author: Mark Dibeh, 2020-06-24 05:56:13

Embrulhar a tua marca input dentro de uma {[2] } irá resolver o teu problema 

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div v-for="problem in problems">
  <div class="row">
    <div class="col">
      <form method="POST" action="/submission" enctype="multipart/form-data" class="form-group">
        <!-- sending the student information -->
        <input type="text" name="courseNumber" :value="courseIdSelected" style="display: none;">
        <input type="text" name="assignmentNumber" :value="assignmentSelected.id" style="display: none;">
        <div class="form-group form-inline">

          <label :for="problem.name">Code submissions {{ problem.name }}</label>

          <!-- wrapping your input tag inside a div -->
          <div>
            <input type="file" name="document" :id="problem.name" class="form-control-file" />
          </div>

        </div>
        <div class="form-group">
          <input type="submit" class="btn btn-primary" />
        </div>
      </form>
    </div>
  </div>
</div>
 1
Author: Fareed Khan, 2020-06-24 06:03:16