为什么使用验证格式输入引导内联形式更宽

Question

当我使用带有Bootstrap 3的内联形式的验证元素时，输入的宽度会变宽。

根据我的观察，正常情况是当验证输入元素时，从输入宽度移除30.5px并且其填充增加30.5px以给予glyphicon跨度空间。但是在内联形式中虽然填充增加了，但输入的宽度并没有减少。

这是我正在使用的验证元素：

<div class="form-group has-success has-feedback">
    <label class="sr-only " for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>

这里有一个说明两种形式之间比较的插图（你需要全屏使用）：plunker

我不确定这是否是一个bootstrap错误，或者我是否在我的html中缺少一个类。

感谢您的帮助。

Answer 1

所以看起来这确实是form-inline类的预期行为。当形式水平类的行为不同时，我真的不明白为什么这个类的行为是这样的，但是好的！ 所以我从我发布的github问题得到了解决方法。

您只需要添加以下css：

.form-inline .has-feedback .form-control {
  padding-right: 12px;
}