Bootstrap de entrada de texto de ancho completo dentro de forma en línea


138

Estoy luchando por crear un cuadro de texto que se ajuste a todo el ancho del área de mi contenedor .

<div class="row">
    <div class="col-md-12">
        <form class="form-inline" role="form">           
                <input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)">
                <button type="submit" class="btn btn-lg">Search</button>            
        </form>
    </div>
</div>

Cuando hago lo anterior, los dos elementos de formulario están en línea, como espero, pero no ocupan más que unas pocas columnas, en el mejor de los casos. Al pasar el col-md-12cursor sobre el div en firebug, muestra que ocupa el ancho completo esperado. Es solo la entrada de texto que no parece llenar. Incluso intenté agregar un valor de ancho en línea pero no cambió nada. Sé que esto debería ser simple, ahora me siento realmente tonto.

Aquí hay un violín: http://jsfiddle.net/52VtD/4119/embedded/result/

EDITAR:

La respuesta seleccionada es exhaustiva en todos los sentidos y una ayuda maravillosa. Es lo que terminé usando.Sin embargo , creo que mi problema inicial fue en realidad un problema con la plantilla MVC5 predeterminada en Visual Studio 2013. Contenía esto en Site.css:

input,
select,
textarea {
    max-width: 280px;
}

Obviamente, eso impedía que la entrada de texto se expandiera adecuadamente ... Advertencia justa para futuros usuarios de plantillas ASP.NET ...


66
Solo quiero respaldar su hallazgo sobre el problema con la plantilla MVC5 predeterminada. Acabo de pasar una hora investigando este problema y maldiciendo (falsamente) en Bootstrap antes de encontrar una muestra funcional en jsfiddle que me llevó a comenzar de nuevo con una página HTML limpia, y funcionó bien. Solo entonces pensé que había un problema con la plantilla VS2013 y encontré esta publicación. Dios sabe por qué la decisión para el ancho máximo, pero demuestra que debes tener cuidado al usar el código de otras personas. También es testimonio de volver a lo básico cuando se encuentra con un problema como este.
Jason Snelders

2
Gracias, también uso la plantilla asp.net, pero ya configuré el ancho máximo de entrada a ninguno, pero aún no toma todo el ancho, solo si lo configuro al 100% manualmente. Pero luego el botón derecho se baja y quiero que permanezca en la misma línea.
Ronen Festinger

@Killnine La edición en tu pregunta resolvió mis dolores de cabeza. De hecho, fue el problema, ¡gracias por editar tu publicación!
Flame_Phoenix

Eliminé ese bit de CSS de mi archivo site.css y todavía tengo el mismo problema. ¿Algunas ideas?
dave317

1
Dayuuumn! ¡He estado luchando con esto y resulta que es un problema de MVC! ¡Qué estúpido soy por no inspeccionar las propiedades CSS del cuadro de texto! ¡Gracias por señalar esto!
Hajjat

Respuestas:


99

Los documentos de bootstrap dicen sobre esto :

Requiere anchos personalizados Las entradas, selecciones y áreas de texto son 100% anchas de manera predeterminada en Bootstrap. Para utilizar el formulario en línea, deberá establecer un ancho en los controles de formulario utilizados en.

El ancho predeterminado del 100% como todos los elementos de formulario se obtienen cuando obtienen la clase form-control no se aplica si utiliza elform-inline clase en su formulario.

Puedes echar un vistazo a bootstrap.css (o .less, lo que prefieras) donde encontrarás esta parte:

.form-inline {

  // Kick in the inline
  @media (min-width: @screen-sm-min) {
    // Inline-block all the things for "inline"
    .form-group {
      display: inline-block;
      margin-bottom: 0;
      vertical-align: middle;
    }

    // In navbar-form, allow folks to *not* use `.form-group`
    .form-control {
      display: inline-block;
      width: auto; // Prevent labels from stacking above inputs in `.form-group`
      vertical-align: middle;
    }
    // Input groups need that 100% width though
    .input-group > .form-control {
      width: 100%;
    }

    [...]
  }
}

Tal vez debería echar un vistazo a los grupos de entrada , ya que supongo que tienen exactamente el marcado que desea usar (violín de trabajo aquí ):

<div class="row">
   <div class="col-lg-12">
    <div class="input-group input-group-lg">
      <input type="text" class="form-control input-lg" id="search-church" placeholder="Your location (City, State, ZIP)">
      <span class="input-group-btn">
        <button class="btn btn-default btn-lg" type="submit">Search</button>
      </span>
    </div>
  </div>
</div>

3
Vea mi edición arriba. Creo que el Site.css en la plantilla ASP.NET puede haberme metido en este. Sin embargo, esta es una respuesta excelente y muy útil para futuras referencias.
Killnine

55
los grupos de entrada son el camino a seguir en esto. Personalmente, ajusto el estilo del grupo de entrada para que se parezca a un formulario en línea cuando no quiero que el botón esté inmediatamente al lado de la entrada. Demostración de trabajo con Bootstrap LESS incluida: jsfiddle.net/silb3r/gwxc5c75
cfx

1
¡bonito! Sé que la pregunta es específica de bootstrap, pero si alguien más quiere colocarla en un sitio sin bootstrap (no bootstrap LESS;), he extraído los estilos relevantes aquí: stackoverflow.com/a/27413796/1241736
henry

El enlace Bootstrap en Fiddle está roto. Probablemente apunta a una nueva versión de Bootstrap y el Fiddle ya no funciona.
Chloe

@Chloe Tienes razón, el violín estaba usando un archivo css bootstrap que ya no existe. Acabo de actualizar el violín, está funcionando de nuevo.
morten.c

32

mira algo como esto:

<form role="form">  
    <div class="row">
      <div class="col-xs-12">
        <div class="input-group input-group-lg">
            <input type="text" class="form-control" />
          <div class="input-group-btn">
            <button type="submit" class="btn">Search</button>
          </div><!-- /btn-group -->
        </div><!-- /input-group -->
      </div><!-- /.col-xs-12 -->
    </div><!-- /.row -->
</form>

http://jsfiddle.net/n6c7v/1/


10

Como se indicó en una pregunta similar , intente eliminar instancias de la input-groupclase y vea si eso ayuda.

refiriéndose a bootstrap:

Los controles de formulario individuales reciben automáticamente un estilo global. Todos los elementos textuales, y con .form-control se establecen en ancho: 100%; por defecto. Envuelva etiquetas y controles en .form-group para un espaciado óptimo.


Por persona, esto no se aplica a los formularios en línea. Por lo tanto, necesita el grupo de entrada para forzarlo a ser 100%
user441058

3

Pruebe algo como a continuación para lograr el resultado deseado

input {
    max-width: 100%;
}

1

Con Bootstrap> 4.1 es solo un caso de usar las clases de utilidad flexbox. Simplemente tenga un contenedor flexbox dentro de su columna y luego asigne a todos los elementos dentro de ella la clase "flex-fill". Al igual que con los formularios en línea, deberá configurar los márgenes / relleno en los elementos usted mismo.

.prop-label {
    margin: .25rem 0 !important;
}

.prop-field {
    margin-left: 1rem;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
	<div class="col-12">
		<div class="d-flex">
			<label class="flex-fill prop-label">Label:</label>
			<input type="text" class="flex-fill form-control prop-field">
		</div>
	</div>
</div>

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.