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> 

私は小さい幅768よりもセカンドラベル「住所2：」のためのFirefox応答デザインモードを使用して、上記チェック

は、新しい行に折り返されるが、それは左にいくつかのマージンを示しています。私は火かき棒を使って検査をチェックするときに何の問題も見ません。

EDIT：実際には、大画面の場合は同じ行に2つのラベルと入力を必要としますが、768px以下の画面の場合は2行に分割します。

Answer 1

入力を別のdivに入れる必要はありません。ラベルタグの後ろに入力し、2つの異なる.form-groupsを2つの入力に使用してください。あなたのコードはこのようにすべきです。

<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をラベルに追加しました。また、小さな場所での配置を改善するために 'text-center'クラスも追加しましたが、これはあなた次第です。

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