ブートストラップ：ラベルの中に入力

Question

私のフォーム上の各入力要素のIDを持たなくて済むように、フォーム入力をlabel（ブートストラップ3）の中に入れたいと思います。

私の問題は、これが行間に余分な垂直方向の間隔を生じさせ、入力がその親の全幅を満たしておらず、入力が整列していないということです。

<form class="form-horizontal"> 
    <div class="form-group"> 
     <label class="row"> 
      <span class="col-md-4 control-label">Email:</span> 
      <div class="col-md-8"> 
      <input class="form-control" type="email" placeholder="Email"/> 
      </div> 
     </label> 
    </div> 
    <div class="form-group"> 
     <label class="row"> 
      <span class="col-md-4 control-label">Password:</span> 
      <div class="col-md-8"> 
      <input class="form-control" type="password" placeholder="Password"/> 
      </div> 
     </label> 
    </div> 
</form> 

Answer 1

ので、あなたは、余分なrowを必要としません。 rowを削除し、設定するCSSにスタイルを追加します。ラベルの場合はです。私はこのHTMLのスタイルをインラインにして、私が意味することを示しています。明らかに、あなたはそれをCSSに入れるべきです。

<form class="form-horizontal"> 
    <label class="form-group" style="display: block"> 
     <span class="control-label col-md-2">Email:</span> 
     <div class="col-md-10"> 
     <input class="form-control" type="email" placeholder="Email"/> 
     </div> 
    </label> 
    <label class="form-group" style="display: block"> 
     <span class="control-label col-md-2">Password:</span> 
     <div class="col-md-10"> 
     <input class="form-control" type="email" placeholder="Email"/> 
     </div> 
    </label> 
</form> 

Answer 2

ソリューションはform-groupとしてラベル自体を使用することですform-group acts like a row ...

<form class="form-horizontal"> 
    <div class="form-group"> 
     <label class="col-xs-4 control-label" for="email">Email:</label> 
     <div class="col-xs-8"> 
      <input class="form-control" placeholder="Email" id="email"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="col-xs-4 control-label" for="pwd">Password:</label> 
     <div class="col-xs-8"> 
      <input class="form-control" placeholder="Password" id="pwd"> 
     </div> 
    </div> 
</form> 

http://www.codeply.com/go/3uRFV0wXG4