在Bootstrap 3中使用Jumbotron容器输入大于输入的组 [英] Input groups bigger than input in Bootstrap 3 using Jumbotron container

问题描述

我使用Bootstrap 3输入组尝试了一个奇怪的行为。当我向jumbotron中的表单添加一个input-group-addon（文本或图标）时，input-group的高度大于输入的高度。

可以找到一个带有问题的JsFiddle和屏幕截图：

 < div class =jumbotron> 
< h1> Jumbotron与表单< / h1> 
< form> 
< div class =input-group> 
< input type =textclass =form-controlplaceholder =Username> 
< span class =input-group-addon> @< / span> 
< / div> 
< / form> 
< / div> 
  

，但您会注意到插件仍然稍大于输入，因此您可以调整匹配的< input> 的高度;我添加了5个像素：

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

I'm experimenting a strange behavior with Bootstrap 3 input groups. When I add an input-group-addon (text or icon) to a form inside a jumbotron, the input-group height is bigger than its input height.

Here you can find a JsFiddle and an screenshot with the problem:

<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>

Live example at http://jsfiddle.net/DTcHh/

Screenshot:

How can I fix this problem? I'm looking for a Bootstrap solution but if that's not possible would be nice if you could help me to fix it with CSS rules.

解决方案

The bootstrap solution is to add the input-group-lg class on the containing <div> - as shown in the documentation, but you'll notice the addon is still slightly larger than the input so you can just adjust the height of the <input> to match; I added 5 px:

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

这篇关于在Bootstrap 3中使用Jumbotron容器输入大于输入的组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！