Bootstrap：在標籤內輸入

Question

爲了避免必須爲我的表單上的每個輸入元素設置ID，我想將我的表單輸入放置在label（Bootstrap 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

的解決方案是使用標籤本身作爲form-group ，刪除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

你並不需要額外的row，因爲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