入力グループが失敗した後のブートストラップフォーム入力場所

Question

私は思ったほど問題はないかもしれませんが、解決に時間がかかります。これが既知の問題かどうかわかりません私はちょうどそれを得ることができません。

私は、.form-horizo​​ntalクラスのブートストラップ3.3.6フォームを持っています。 私はいくつかの行を持ち、各行に異なる数の入力を入れたいと思っています。問題は、入力グループ（つまり、アドオンカレンダーボタン付きの入力グループ）を使用した後で、同じ行に他の入力が表示されない場合（次の行に区切る場合）に発生します。

例として、私は行内の最後の入力グループ（Form2 - 明らかにうまく見える）と同じ行を示し、同じ行が入力の順序を逆転させるForm1）、input-groupが真ん中にあり、レンダリングされた結果が行を分割し、この入力グループの後のすべてを下の行に表示するようにします。

• コード：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<form class="form-horizontal"> 
 
    <h3>Form1</h3> 
 
    <div class="form-group"> 
 
    <label for="input-name" class="col-sm-1 control-label">Name</label> 
 
    <div class="col-sm-2"> 
 
     <input type="text" class="form-control" id="input-name"> 
 
    </div> 
 

 
    <label for="birthdate" class="col-sm-1 control-label">Birth</label> 
 
    <div class="input-group col-sm-1"> 
 
     <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> 
 
     <input type="text" class="form-control" id="birthdate"> 
 
    </div> 
 

 
    <label for="age" class="col-sm-1 control-label">Age</label> 
 
    <div class="col-sm-1"> 
 
     <input type="text" class="form-control" id="age"> 
 
    </div> 
 
    </div> 
 
</form> 
 

 
<form class="form-horizontal"> 
 
    <h3>Form2</h3> 
 
    <div class="form-group"> 
 
    <label for="input-name" class="col-sm-1 control-label">Name</label> 
 
    <div class="col-sm-2"> 
 
     <input type="text" class="form-control" id="input-name"> 
 
    </div> 
 

 
    <label for="age" class="col-sm-1 control-label">Age</label> 
 
    <div class="col-sm-1"> 
 
     <input type="text" class="form-control" id="age"> 
 
    </div> 
 

 
    <label for="birthdate" class="col-sm-1 control-label">Birth</label> 
 
    <div class="input-group col-sm-1"> 
 
     <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> 
 
     <input type="text" class="form-control" id="birthdate"> 
 
    </div> 
 

 
    </div> 
 
</form>

• スクリーンショット：

フォームに.form-inlineがある場合、私が必要とするものではない類似のソリューションの多くの例を見てきました。私はそれが単一のものではなく、複数の行の入力を持っているので、.form-horizo​​ntalであることが必要です。 誰もそのような問題の経験があり、それを解決する方法を知っていますか？

Answer 1

入力birthdateを囲むダイビングからクラスinput-groupを離陸してください。この場合は必要ありません。あなたはそれを使用することを主張する場合は、クラスpull-leftを追加することができます。