Javascript 引导程序错误-输入有错误，反馈图标没有垂直居中？

为什么

字形图标警告标志表单控制反馈
未垂直居中于下面的代码中-添加
后字体大小：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>

结果:


警告文本也不是红色的

有什么想法吗

在，但我找不到引导作为加载选项

编辑：

您可以在
1）看到这个bug。您可以在屏幕左侧的JSFIDLE中添加外部资源，使用引导CDN

2） 标签的字体大小是导致问题的原因。图标是固定的，标签大小改变时，图标不起作用（不要问我为什么-使用引导记录）

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

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

演示
1）您可以在屏幕左侧的JSFIDLE中添加外部资源，使用引导CDN

2） 标签的字体大小是导致问题的原因。图标是固定的，标签大小改变时，图标不起作用（不要问我为什么-使用引导记录）

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

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

演示
将其从样式中删除

.content.contact标签{
字体大小：20px；
}

在这一行代码中，在类中添加警告


添加任何类名，然后将已删除的样式替换为

。警告{
字体大小：20px；
}
将其从样式中删除

.content.contact标签{
字体大小：20px；
}

在这一行代码中，在类中添加警告


添加任何类名，然后将已删除的样式替换为

。警告{
字体大小：20px；
}
将此添加到样式表中：

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

  #inputWarning2Status{
  color:red;
  }


它会很好地工作。
将以下内容添加到样式表中：

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

  #inputWarning2Status{
  color:red;
  }


布拉德的答案是好的，但它是片面的。当您更改标签的大小，或在输入之前添加更多内容时，它将再次被销毁。由于元素
.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>


您的姓名（必填）
（警告）

工作演示：
布拉德的答案是好的，但它是局部的。当您更改标签的大小，或在输入之前添加更多内容时，它将再次被销毁。由于元素
.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>


您的姓名（必填）
（警告）

工作演示：
对于引导示例，您应该使用bootply（而不是jsfiddle）。对于引导示例，您应该使用bootply（而不是jsfiddle）。字体大小的增加会将输入框向下推。总数为33像素。我认为默认情况下，引导程序确实是顶级的：20px；或者类似的东西，所以如果你增加更多的字体大小，你也需要增加顶部：33px；相应地，字体大小的增加将输入框向下推。总数为33像素。我认为默认情况下，引导程序确实是顶级的：20px；或者类似的东西，所以如果你增加更多的字体大小，你也需要增加顶部：33px；因此，我喜欢这个没有黑客引导的解决方案！谢谢是的，没有黑客的解决方案总是最好的：）不客气。我喜欢这个没有黑客引导的解决方案！谢谢是的，没有黑客攻击的解决方案总是最好的：）不客气。