使用 Jumbotron 容器的输入组大于 Bootstrap 3 中的输入

Question

我正在使用 Bootstrap 3 输入组尝试一种奇怪的行为。当我将输入组插件（文本或图标）添加到 jumbotron 内的表单时，输入组高度大于其输入高度。

在这里你可以找到一个 JsFiddle 和一个有问题的截图：

 <div class="jumbotron">
    <h1>Jumbotron with form</h1>
        <form>
           <div class="input-group">
               <input type="text" class="form-control" placeholder="Username">
                  <span class="input-group-addon">@</span>
           </div>
        </form>
  </div>

http://jsfiddle.net/DTcHh/ 上的实时示例

截屏：

我该如何解决这个问题？我正在寻找一个 Bootstrap 解决方案，但如果这不可能，如果你能帮助我用 CSS 规则修复它，那就太好了。

原文由 David Moreno García 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

引导解决方案是在包含的 <div> 上添加 input-group-lg 类 - 如 文档所示，但您会注意到插件仍然略大于输入，因此您可以调整 <input> 的高度以匹配；我添加了 5 像素：

http://jsfiddle.net/DTcHh/21/

原文由 Adrift 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果有人还在寻找答案。这对我有帮助。所以我尝试设置 .input-group-addon 类的样式，但它没有做任何事情，所以我更改了 .input-group 类并将高度设置为 20px（因为我将输入字段设置为 20px ），它 非常 适合我的情况。 （附截图）

希望能帮助到你。让我知道是否有人需要一个有效的 jsfiddle 示例。

原文由 Omair Munir 发布，翻译遵循 CC BY-SA 4.0 许可协议