Question

如何将bootstrap 3验证状态添加到输入组。该州似乎只适用于该组的输入部分。

EDIT 10/02/2014：为了澄清，我正在使用带按钮的输入组：

<div class="form-group has-success col-md-3">
  <label class="control-label"></label>
  <div class="input-group">
    <input type="text" class="form-control">
    <span class="input-group-btn">
      <button class="btn btn-default" type="button">Go!</button>
    </span>
  </div>
</div>

http://bootply.com/112305

Answer 1

诀窍是将实际输入放在自己的块中。请尝试以下方法：

<div class="form-group has-feedback">
    <div class="input-group">
        <div style="position:relative"><!-- sub container for the input and validation state -->
            <input name="emailAddress" type="text" class="form-control" value="">
            <span class="glyphicon glyphicon-remove form-control-feedback"><!----></span>
        </div>
        <span class="input-group-btn">
            <button id="button-send" type="submit" class="btn btn-primary">Go!</button>
        </span>
    </div>
</div>

Answer 2

将其包裹在form-group内，并将验证状态类应用于表单组..

<div class="form-group has-success col-md-3">
  <label class="control-label"></label>
  <div class="input-group">
    <input type="text" class="form-control">
    <span class="input-group-addon">00</span>
  </div>
</div>

http://bootply.com/111979

具有输入组的Bootstrap 3验证状态

2 个答案: