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