Bootstrap entrada de texto de ancho completo dentro del formulario en línea

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

<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 del 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 cursor sobre el div col-md-12 en firebug muestra que ocupa el ancho total 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, solo sentir realmente tonto ahora.

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

EDITAR:

La respuesta seleccionada es minuciosa 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 dentro de Visual Studio 2013. Contenía esto en el Sitio.css:

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

Obviamente eso estaba bloqueando que la entrada de texto se expandiera apropiadamente... Feria advertencia al futuro ASP.NET usuarios de plantillas...

Author: Killnine, 2014-04-01
Source

3 answers

Los documentos de bootstrap dicen sobre esto :

Requiere entradas de anchos personalizados, selecciona y las áreas de texto son 100% anchas por por defecto en Bootstrap. Para usar el formulario en línea, tendrás que establecer un ancho en los controles de formulario utilizados dentro.

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

Podrías echar un vistazo al bootstrap.css (or .menos, lo que prefieras) donde encontrará 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 input-groups , 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>
 78
Author: morten.c,
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
2018-06-12 14:42:21

Echa un vistazo a 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/

 26
Author: haxxxton,
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-04-01 00:56:05

Como se indica en una pregunta similar, intente eliminar instancias de la clase input-group y vea si eso ayuda.

Refiriéndose a bootstrap:

Los controles de formulario individuales reciben automáticamente algún estilo global. Todos los textuales,, y elementos con .los controles de forma están configurados en ancho: 100%; por defecto. Envolver etiquetas y controles adentro .forma-grupo para un espaciado óptimo.

 8
Author: kurdtpage,
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-05-23 12:02:59