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

jumbotron bootstrap color

Question

Estoy experimentando un comportamiento extraño con los grupos de entrada Bootstrap 3. Cuando agrego un input-group-addon (texto o icono) a un formulario dentro de un jumbotron, la altura del grupo de entrada 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:

¿Como puedo solucionar este problema? Estoy buscando una solución de Bootstrap, pero si eso no fuera posible, sería bueno si pudiera ayudarme a solucionarlo con las reglas de CSS.

Answer 1

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 en 0:

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

¡Quizás esto ayude a alguien con un problema similar!

Answer 2

El problema principal del .input-group-addon de .input-group-addon dentro de .jumbotron es que hereda font-size de font-size de .jumbotron .

Por lo general, las personas intentan cambiar la altura, la altura mínima o el relleno, etc.

Sin embargo, la causa del tamaño diferente es que .input-group en .jumbotron hereda "font-size: 21px;"

Debe cambiar el font-size de font-size de .input-group NO .input-group-addon como a continuación.

.input-group { font-size: 14px !important; }

Answer 3

En lugar de hacer que la entrada sea más grande, reduzca el lapso (input-group-addon). Para hacer eso, reduzca su relleno. Asi que:

.input-group-addon {
    padding: 0px 6px;
}

Answer 4

La solución bootstrap es agregar la clase input-group-lg en el <div> contiene, como se muestra en la documentación , pero verás que el complemento sigue siendo un poco más grande que la entrada, así que puedes ajustar la altura del <input> para hacer coincidir; Agregué 5 px:

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

Answer 5

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.

Answer 6

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 LARGE pero si no lo haces, está mal. Usando IE9 y ejecutando su código tanto en mi propio entorno de desarrollo como en jsfiddle de Adrift, funciona correctamente (para mí) con y sin la clase input-group-lg, excepto por supuesto que con él se vuelve grande. Tal vez un problema específico del navegador?

Dicho esto, estoy experimentando un problema similar al tratar de agregar un botón de opción al frente de un seleccionador. Oh bien...