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

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

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>

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/

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.

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

input {
    max-width: 100%;
}

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>