我正在尝试准备一个HTML表单，该表单要求布局最多4个不同的行。请参阅以下带有注释的代码。基本上，我正在寻找前3个表单项在第1行上，接下来的3个在第2行，依此类推。每个项目都应与其他项目分开。我使用了3列大小设置，因为每个文本框都期望相对较短的输入（一个单词）。
根据选择选项，打开和关闭框3至8（行2和3）。如果关闭，则只有2行（前3项=第1行，按钮=第2行）。
当我添加class =“ row”时，表单项相互融合，并且当选择类型2时，由于将6个额外的框添加到了混乱中，因此表单项变得更加混乱。
使用引导程序4
行类是否位于正确的位置？我应该使用其他课程吗？ 我不熟悉所有这些，因此对于将表格设置为正确规格的任何帮助将不胜感激。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function() {
$("#conj").hide();
$("#type").on("change",function() {
if ($(this).val() === "addl") {
$("#conj").show();
}
else {
$("#conj").hide();
}
});
});
</script>
<h1 align="left">Dev Env - Test 110319C</h1>
<form action="/addvocab" method="post" class="form-inline">
<!-- Box 1,box 2 and select menu on row 1 -->
<div class="row">
<div class="form-group col-sm-3">
<input autocomplete="off" autofocus class="form-control" name="box1" placeholder="Box 1" type="text">
</div>
<div class="form-group col-sm-3">
<input autocomplete="off" class="form-control" name="box2" placeholder="Box 2" type="text">
</div>
<div class="form-group col-sm-3">
<select id="type" class="form-control" name="part">
<option disabled selected value="">Type</option>
<option>Type 1</option>
<option value="addl">Type 2</option>
<option>Type 3</option>
<option>Type 4</option>
<option>Type 5</option>
<option>Type 6</option>
<option>Type 7</option>
</select>
</div>
</div>
<div>
<!-- Boxes 3 through 8 only show if select option TYpe 2 is selected -->
<label id="conj">
<!-- Boxes 3,4 and 5 on row 2 if visible -->
<div class="row">
<div class="form-group col-sm-3">
<input autocomplete="off" autofocus class="form-control" name="box3" placeholder="Box 3" type="text">
</div>
<div class="form-group col-sm-3">
<input autocomplete="off" autofocus class="form-control" name="box4" placeholder="Box 4" type="text">
</div>
<div class="form-group col-sm-3">
<input autocomplete="off" autofocus class="form-control" name="box5" placeholder="Box 5" type="text">
</div>
</div>
<!-- Boxes 6,7 and 8 on row 3 if visible -->
<div class="row">
<div class="form-group col-sm-3">
<input autocomplete="off" autofocus class="form-control" name="box6" placeholder="Box 6" type="text">
</div>
<div class="form-group col-sm-3">
<input autocomplete="off" autofocus class="form-control" name="box7" placeholder="Box 7" type="text">
</div>
<div class="form-group col-sm-3">
<input autocomplete="off" autofocus class="form-control" name="box8" placeholder="Box 8" type="text">
</div>
</div>
</label>
</div>
<!-- Button on row 2 if boxes 3 through 8 are not visible. On row 4 if visible -->
<div class="row">
<button class="btn btn-primary col-xs-6" type="submit">Add Word</button>
</div>
</form>
