我希望在大屏幕上查看时可以构建一个包含两列的表单,并且在较小的屏幕(如手机)上查看时会变为一列。
我的方法如下。当我在全屏显示在桌面上时它看起来很好。当我用非常窄的屏幕在桌面上显示它时,它看起来也很好;表格减少到一列。但是,在大小之间的路上,当标签(“语言”)与选择字段重叠时,有一些宽度。
我可以以某种方式阻止这种情况吗?
提前致谢!
<form class="form-horizontal" action="/action_page.php">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Language:</label>
<div class="col-sm-10">
<select class="form-control" name="language" id="language">
<option value="none">(no restriction)</option>
<option value="Deutsch">German</option>
<option value="Englisch">English</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Language2:</label>
<div class="col-sm-10">
<select class="form-control" name="language" id="language">
<option value="none">(no restriction)</option>
<option value="Deutsch">German</option>
<option value="Englisch">English</option>
</select>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Language:</label>
<div class="col-sm-10">
<select class="form-control" name="language" id="language">
<option value="none">(no restriction)</option>
<option value="Deutsch">German</option>
<option value="Englisch">English</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Language2:</label>
<div class="col-sm-10">
<select class="form-control" name="language" id="language">
<option value="none">(no restriction)</option>
<option value="Deutsch">German</option>
<option value="Englisch">English</option>
</select>
</div>
</div>
</div>
</div>
</form>