【问题标题】：label not inline for input in bootstrap 4在引导程序 4 中，标签不是内联输入
【发布时间】：2020-10-14 07:23:02
【问题描述】：
我正在使用 Bootstrap 4 和 Vue.js 来填充输入表单，但我不知道如何使 标签与输入类型文件保持一致。
<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>
是否有一些仅使用一些 Bootstrap 类的解决方案，或者我需要更改样式 (CSS) 以使其在与输入相同的行中显示标签。
这是截图：
【问题讨论】：
标签：
html
css
vue.js
bootstrap-4
label
【解决方案1】：
来自 bs4 的内联示例：
<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】：
如果您在标签内进行输入，它将帮助您解决问题
<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>
【解决方案3】：
将您的 input 标签包装在 div 中将解决您的问题
<!-- 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>