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

Question

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

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

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

<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 包，你可以使用这个 fiddle作为起点来自己测试它。

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

Answer 1

要控制表单大小，我只能建议您使用专用的 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>