我尝试在所有<select>
下拉列表后添加一个复选框,但是在同一行/行中。我真的很难这样做,我现在已经尝试了一段时间,我不能让它自己动手。 CSS来自Bootstrap 3。
以下是我的代码和表单的样子:
<form role="form" id="newchar" name="newchar" method="POST" action="inc/insertchar.php">
<div class="row">
<div class="form-group col-sm-3">
<label for="charname">Charactername</label>
<a href="#" data-toggle="tooltip" data-placement="right" title="maximal 16 Zeichen - bestehend aus Zahlen und Buchstaben">
<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
</a>
<input type="text" class="form-control" name="charname" id="charname" placeholder="Charactername" required="required" />
</div>
</div>
<div class="row">
<div class="form-group col-sm-3">
<label for="c1">Circles:</label>
<div class="form-group">
<select name="circle_1" id="c1" class="form-control circle-select">
<option value="">Circle 1</option>
<option value="class_1">Archer</option>
<option value="class_2">Cleric</option>
<option value="class_3">Swordsman</option>
<option value="class_4">Wizard</option>
</select>
</div>
<div class="form-group">
<select name="circle_2" id="c2" class="form-control circle-select" disabled="disabled">
<option value="">select Circle 1 first</option>
</select>
</div>
<div class="form-group">
<select name="circle_3" id="c3" class="form-control circle-select" disabled="disabled">
<option value="">select Circle 2 first</option>
</select>
</div>
<!-- and more ... -->
完整代码和预览:https://jsfiddle.net/hd7fzp95/