Bootstrap bug - 输入has-error has-feedback glyphicon不是垂直居中的？

Question

为glyphicon-warning-sign form-control-feedback添加font-size: 20px;之后，为什么label未在下面的代码中垂直居中？

<div class="container">

      <div class="content align-left contact">
        <p>Hello World!</p>
        <form action="#" method="post" id="contact-form">

          <div class="form-group has-error has-feedback">
            <label for="inputName">Your Name (required)</label>
            <input type="text" name="name" class="form-control" id="input-name" placeholder="Name">
            <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
            <span id="inputWarning2Status">(warning)</span>
          </div>

        </form>
      </div>

</div>

CSS：

.has-feedback .form-control-feedback {
    border: 1px solid black;
}

.content {
  padding: 100px;
}
.content p {
  font-size: 18px;
  letter-spacing: 1px;
  line-height: 30px;
  padding-bottom: 20px;
}
.content.contact label {
  font-weight: 700;
}
.content.contact label {
  font-size: 20px; // this is where the error cause - but why!???
}

结果：

警告文字也不是红色。

有什么想法吗？

在jsfiddle，但我找不到bootstrap作为加载选项！

修改

您可以在bootply

看到错误

Answer 1

布拉德答案很好，但这很偏僻。当您更改标签的大小，或者在输入之前添加更多内容时，它将再次被销毁。由于元素.form-control-feedback具有绝对位置，因此您应该使用输入在公共父级中对其进行扭曲，因此您将始终获得正确的结果。添加此CSS：

.warning {
  color:#a94442;
}
.my-group {
  position: relative;
}

并更新HTML：

<div class="form-group has-error has-feedback">
    <label for="inputName">Your Name (required)</label>
    <div class="my-group">
        <input type="text" name="name" class="form-control" id="input-name" placeholder="Name">
        <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
    </div>
    <span id="inputWarning2Status">(warning)</span>
</div>

工作演示：http://www.bootply.com/jGxRAFMKkg

Answer 2

1）您可以将外部资源添加到屏幕左侧的jsfiddle，使用引导程序CDN。

2）标签的字体大小导致问题。图标是固定的，并且不会随着标签尺寸的变化而变好（不要问我为什么 - 使用引导程序登录）。

3）修复：将以下内容添加到css：

.has-feedback label~.form-control-feedback {
  top:33px;
}
.warning {
  color:#a94442; /*add this class to your warnings span*/
}

DEMO https://jsfiddle.net/10yLhpu3/

Answer 3

将此添加到样式表：

.glyphicon-warning-sign{
  margin-top:8px;
  }

  #inputWarning2Status{
  color:red;
  }

http://www.bootply.com/gy41ldchWf

它会正常工作。

Answer 4

从样式

中删除它

.content.contact label { font-size: 20px; }

在这行代码中，在类

中添加警告

<span class="glyphicon glyphicon-warning-sign form-control-feedback warning" aria-hidden="true"></span>

添加任何类名，然后用此

替换您删除的样式

.warning { font-size: 20px; }