javascript - Bootstrap 错误 - 输入 has-error has-feedback glyphicon 不是垂直居中？

Question

为什么 glyphicon-warning-sign form-control-feedback 在下面的代码中没有垂直居中 - 在将 font-size: 20px; 添加到 之后标签?

<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

Brad 的回答很好，但很片面。当你改变标签的大小时，或者你在输入之前添加了一些内容，那么它会再次被销毁。由于元素 .form-control-feedback 具有绝对位置，因此您应该将其与输入一起放在公共(public)父级中，这样您将始终获得正确的结果。添加此 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