bootstrap 3.3.6小屏幕响应窗体

Question

我正在使用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：”被包裹到一个新的生产线，但它显示了留有一定余量。当我使用萤火虫检查检查时，我没有看到任何问题。

编辑：其实我想要2个以上的标签和大屏幕同一行上的输入，但分解为768px以下屏幕的2行。

Answer 1

您不需要将该输入放入另一个div内。只需在标签标签后面输入您的输入，并为两个输入使用两个不同的.form-groups。你的代码应该是这样的。

<div class="form-group"> 
    <label for="address1" class="col-xs-2 col-md-1 control-label">Address 1:</label> 
    <input type="text" name="address1" id="" class="form-control" maxlength="55" value="" /> 
</div> 


<div class="form-group"> 
    <label for="address1" class="col-xs-2 col-md-1 control-label">Address 1:</label> 
    <input type="text" name="address1" id="" class="form-control" maxlength="55" value="" /> 
</div> 

如果你需要做一个在线的形式，添加形式直插类的<form>元素。

<form class="form-inline"> 

最好的问候！

Answer 2

我已经添加了col-xs-12做的标签和'文本中心'类更好的定位在小，但这取决于你。

<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>