フォーム・コントロールとブートストラップ4の行内のラッピング・ラベルの垂直方向の整列

Question

入力フィールドの上にラベルが付いた行に入力エレメントがあります。画面の幅が絞られたときに複数の単語からなる長いラベルは、全体的な行高くなって、次の行に縦糸およびダウン入力要素をシフト：

テキストの折り返しが微細になり、しかし、私はラッピングラベルのない他の入力を、シフトダウンされたものと揃えたいと思っています。

どうすればこの問題を解決できますか？私は、これは私のコードです...省略記号を使用するよりも、別の解決策を見つけるために

をしたいと思います：

<div class="row"> 
    <div class="col-md-4 form-group"> 
     <div ><label>Short Label</label></div> 
     <div ><input class="form-control" ></div> 

    </div> 

    <div class="col-md-4 form-group"> 
     <div ><label>This label is too long</label></div> 
     <div ><input class="form-control" ></div> 

    </div> 

    <div class="col-md-4 form-group"> 
     <div ><label>Another label</label></div> 
     <div ><input class="form-control" ></div> 
    </div> 
</div> 

Answer 1

クラスを置き換えることができます。新しいalign-items-endを使用することができますクラス（Alignment）

<div class="row align-items-end"> 
    <div class="col-md-4 form-group"> 
     <div ><label>Short Label</label></div> 
     <div ><input class="form-control" ></div> 

    </div> 

    <div class="col-md-4 form-group"> 
     <div ><label>This label is too long</label></div> 
     <div ><input class="form-control" ></div> 

    </div> 

    <div class="col-md-4 form-group"> 
     <div ><label>Another label</label></div> 
     <div ><input class="form-control" ></div> 
    </div> 
</div> 

Answer 2

あなたはcol-md-4

colから

<div class="row"> 
    <div class="col form-group"> 
     <div ><label>Short Label</label></div> 
     <div ><input class="form-control" ></div> 
    </div> 
    <div class="col form-group"> 
     <div ><label>This label is too long</label></div> 
     <div ><input class="form-control" ></div> 
    </div> 
    <div class="col form-group"> 
     <div ><label>Another label</label></div> 
     <div ><input class="form-control" ></div> 
    </div> 
</div>