Grupos de entrada más grandes que la entrada en Bootstrap 3 usando el contenedor Jumbotron

Estoy experimentando un comportamiento extraño con Bootstrap 3 grupos de entrada. Cuando añado un input-group-addon (texto o icono) a un formulario dentro de un jumbotron, la altura del input-group es mayor que su altura de entrada.

Aquí puede encontrar un JsFiddle y una captura de pantalla con el problema: 

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

Ejemplo en Vivo en http://jsfiddle.net/DTcHh/

Captura de pantalla: introduzca la descripción de la imagen aquí

¿Cómo puedo solucionar este problema? Estoy buscando una solución Bootstrap pero si eso no es posible sería sería bueno si pudieras ayudarme a arreglarlo con reglas CSS.

Author: Adrift, 2013-09-02
Source

6 answers

La solución de bootstrap es agregar la clase input-group-lg en el <div> que contiene-como se muestra en la documentación, pero notará que el complemento es aún ligeramente más grande que la entrada, por lo que puede ajustar la altura del <input> para que coincida; Agregué 5 px:

Http://jsfiddle.net/DTcHh/21 /

 18
Author: Adrift,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-05 17:22:23

Anoche, tuve exactamente el mismo problema. Ninguna de las correcciones mencionadas anteriormente funcionó en mi contexto. Lo que finalmente hizo el trabajo fue establecer el margen a 0: 

.input-group .form-control {
    margin: 0px !important;
}

¡Tal vez esto ayude a alguien con un problema similar!

 27
Author: goetz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-06-14 10:29:23

El principal problema de .input-group-addon tamaño dentro de {[2] } es que hereda font-size de .jumbotron.

Por lo general, las personas están tratando de cambiar la altura, la altura mínima o el relleno, etc.

Sin Embargo la causa de diferente tamaño, es que {[5] {} en[2]} hereda "font-size: 21px;"

Usted debe cambiar el font-size de .input-group NO .input-group-addon como abajo.

.input-group { font-size: 14px !important; }
 10
Author: Hosang Jeon,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-11-24 09:02:09

Mirando el documento de Bootstrap como sugiere Adrift, su código original parece perfectamente válido. Agregar la clase input-group-lg es genial si quieres GRANDE, pero si no lo haces, está mal. Usando IE9 y ejecutando su código tanto en mi propio entorno de desarrollo como en el jsfiddle de Adrift, está funcionando correctamente (para mí) con y sin la clase input-group-lg, excepto por supuesto que con ella se vuelve grande. Tal vez un problema específico del navegador??

Dicho esto, estoy experimentando un problema similar al intentar para agregar un botón de opción en la parte delantera de un selectpicker. Oh, bueno...

 2
Author: Will,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-20 16:07:09

Lo arreglé añadiendo id="search_button" a mi botón: 

<div class="input-group input-group-lg">
    <input type="text" class="form-control" placeholder="Username"/>
    <span class="input-group-btn">
        <button id="search_button" class="btn btn-primary" type="button">GO</button>
    </span>
</div>

Luego apliqué el siguiente estilo a mi botón: 

#search_button {
    width: 90px;
    margin: 0 auto;
    text-align: justify;
}

Eso es todo.

 0
Author: arielduarte,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-08 13:45:45

En lugar de hacer que la entrada sea más grande, haga que el span (input-group-addon) sea más pequeño. Para hacer eso, haz que su relleno sea más bajo. Entonces: 

.input-group-addon {
    padding: 0px 6px;
}
 -1
Author: Ali Abdoli,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-29 23:01:27