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，然后为设置display: block标签的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 acts like a row ...

，您不需要额外的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

Bootstrap：在标签内输入

2 个答案: