validation - Bootstrap : Validation states with form-inline fields?

Question

有没有办法使用 Bootstrap 的表单字段验证状态/类(警告、错误、信息、成功)在 form-inline 字段上(不使用 control-group)？

<小时/>

我正在使用 Bootstrap，并且我有一个使用 form-horizo​​ntal 类进行布局的大型表单。但是，表单中的某些区域的字段需要内联(例如，城市/州/邮政编码)。我使用 form-inline 来实现此目的，效果很好。这是基本标记:

<form id="account-form" class="form-horizontal" method="post" action="" novalidate>
    <!-- Address -->
    <div class="control-group">
        <label class="control-label">Address</label>

        <div class="controls">
            <input type="text" name="address" />
        </div>
    </div>

    <!-- City, State, Zip -->
    <div class="control-group">
        <label class="control-label">City</label>

        <div class="controls form-inline">
            <input type="text" name="city" />

            <label>State</label>
            <input type="text" name="state" />

            <label>Zip Code</label>
            <input type="text" name="zipcode" />
        </div>
    </div>
</form>

在我的特殊情况下，我需要手动处理验证。不幸的是，Bootstrap 的验证状态类似乎必须应用于 control-group；正如您在上面的示例中看到的，在我的例子中，control-group 包含多个字段。我尝试将各个字段包装在 control-group spans 或 div 中，但是 control-group 在与 form-inline 一起使用时根本无法很好地发挥作用code> 和 form-horizo​​ntal 一起!

是否有 CSS 类或其他规则可以直接附加到字段(或其他无辜的字段包装器)以将这些样式应用到各个字段，而无需完全重新声明所有标准 Bootstrap 样式？

Answer 1

您可以创建一些自定义的较少代码并重新编译 Bootstrap :

添加@import "_custom.less";到less/bootstrap.less

创建less/_custom.less:

// Mixin for inline form field states
.inlineformFieldState(@warning: success,@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
  // Set the text color
  label.@{warning},
  .help-block .@{warning},
  .help-inline .@{warning}{
    color: @textColor;
  }
  // Style inputs accordingly
  .checkbox .@{warning},
  .radio .@{warning},
  input.@{warning},
  select.@{warning},
  textarea.@{warning} {
    color: @textColor;
  }
  input.@{warning},
  select.@{warning},
  textarea.@{warning} {
    border-color: @borderColor;
    .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
    &:focus {
      border-color: darken(@borderColor, 10%);
      @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
      .box-shadow(@shadow);
    }
  }
  // Give a small background color for input-prepend/-append
  .input-prepend .add-on .@{warning},
  .input-append .add-on .@{warning} {
    color: @textColor;
    background-color: @backgroundColor;
    border-color: @textColor;
  }
}

.form-inline{
  .inlineformFieldState(success, @successText, @successText, @successBackground);
  .inlineformFieldState(warning, @warningText, @warningText, @warningBackground);
  .inlineformFieldState(info, @infoText, @infoText, @infoBackground);
  .inlineformFieldState(error, @errorText, @errorText, @errorBackground);
}

这个mixin基于less/mixins.less中的.formFieldState。重新编译 Bootstrap 后，您可以使用(另请参阅:http://jsfiddle.net/bassjobsen/K3RE3/):

<form>
<div class="container">
   <div class="control-group">
        <div class="controls form-inline">
            <label class="error">City</label>
            <input class="error" type="text" name="city" />
            <label class="warning">State</label>
            <input class="warning" type="text" name="state" />
            <label class="success">Zip Code</label>
            <input class="success" type="text" name="zipcode" />
            <label class="info">Street</label>
            <input class="info" type="text" name="street" />
        </div>
</div>
</div>
</form>