我正在使用 Twitter Bootstrap 3.3.6。我是新手。我设计了一个包含以下输入字段的表单。
<div class="form-group row">
<label for="address1" class="col-xs-2 col-md-1 control-label">Address 1:</label>
<div class="col-xs-10 col-md-4">
<input type="text" name="address1" id="" class="form-control" maxlength="55" value="" />
</div>
<label for="address2" class="col-xs-2 col-md-1 control-label">Address 2:</label>
<div class="col-xs-10 col-md-4">
<input type="text" name="address2" id="" class="form-control" maxlength="55" value="" />
</div>
</div>
当我在上面使用 Firefox 响应式设计模式检查宽度小于 768 时,第二个标签“地址 2:”被换行,但它在左侧显示了一些边距。当我使用 firebug 检查检查时,我没有发现任何问题。
编辑:实际上,对于大屏幕,我希望在同一行上有 2 个以上的标签和输入,但对于 768 像素以下的屏幕,我希望将其分解为 2 行。
最佳答案
我添加了 col-xs-12 做标签和 'text-center' 类,以便更好地定位在 small 上,但这取决于你。
<div class="form-group row">
<label for="address1" class="col-xs-12 col-md-1 control-label text-center">Address 1:</label>
<div class="col-xs-10 col-md-4">
<input type="text" name="address1" id="" class="form-control" maxlength="55" value="" />
</div>
<label for="address2" class="col-xs-12 col-md-1 control-label text-center">Address 2:</label>
<div class="col-xs-10 col-md-4">
<input type="text" name="address2" id="" class="form-control" maxlength="55" value="" />
</div>
</div>
关于css - Bootstrap 3.3.6 小屏幕上的响应式表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39492287/