FormValidation / formvalidation.io Bootstrap 插件在样式改变时错误放置验证图标

如何解决FormValidation / formvalidation.io Bootstrap 插件在样式改变时错误放置验证图标

这是 FormValidation 包中的错误还是我遗漏了什么？

当我测试标准的、原始的、开箱即用的 Bootstrap 页面时（比如 this page 中的“堆叠表单”示例），表单会验证并正确放置其图标。

但是如果我做其他任何事情，比如说将一个项目附加到输入组：

<div class="form-group">
  <label>Price</label>
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">$</span>
    </div>
    <input type="text" class="form-control" name="price" />
    <div class="input-group-append">
      <span class="input-group-text">.00</span>
    </div>
  </div>
</div>

然后图标错位了：

如果我更改字体大小或完全调整标签，情况只会变得更糟：

<style>
  body {
    font-size: 14px;
  }
  label {
      display: inline-block;
      max-width: 100%;
      margin-bottom: 0px;
      font-weight: 700
  }
  .form-control {
    font-size: 14px;
  }
</style>

如果您有 FormValidation 包，您可以使用 this fiddle 作为起点自行测试。

这又是 FormValidation / formvalidation.io 包中的错误还是我遗漏了什么？

解决方法

要控制表单大小，我只能建议您使用专用的 Bootstrap 类：here 或 there

要正确放置图标，您可能需要再次使用自己的类。

.fv-plugins-bootstrap .form-group.row.three-char .fv-plugins-icon {
  right: 35px;
}

.fv-plugins-bootstrap .form-group.row.four-char .fv-plugins-icon {
  right: 45px;
}

<div class="form-group three-char">
  <label>Price</label>
  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">$</span>
    </div>
    <input type="text" class="form-control" name="price" />
    <div class="input-group-append">
      <span class="input-group-text">.00</span>
    </div>
  </div>
</div>