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设置display: block标签添加样式.我已经在这个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>