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>