Entrada de texto de largura total de inicialização no formato inline

Estou lutando para criar uma caixa de texto que se ajuste a toda a largura da minha área de contêiner .

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

Quando faço isso, os dois elementos do formulário estão alinhados, como eu esperava, mas não ocupam mais do que algumas colunas, na melhor das hipóteses. Passar o mouse sobre a col-md-12div no firebug mostra que ela ocupa a largura total esperada. É apenas a entrada de texto que parece não preencher. Eu até tentei adicionar um valor de largura em linha, mas isso não mudou nada. Eu sei que isso deve ser simples, apenas me sentindo muito burro agora.

Aqui está um violino: http://jsfiddle.net/52VtD/4119/embedded/result/

EDITAR:

A resposta selecionada é completa em todos os sentidos e uma ajuda maravilhosa. É o que eu acabei usando. No entanto , acho que meu problema inicial foi realmente um problema com o modelo MVC5 padrão no Visual Studio 2013. Ele continha isso no Site.css:

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

Obviamente, isso estava impedindo que a entrada de texto se expandisse adequadamente ... Aviso justo para futuros usuários de modelos do ASP.NET ...

Os documentos de inicialização dizem sobre isso :

Requer larguras personalizadas As entradas, seleções e áreas de texto têm 100% de largura por padrão no Bootstrap. Para usar o formulário embutido, você precisará definir uma largura nos controles de formulário usados ​​dentro.

A largura padrão de 100%, como todos os elementos do formulário obtém quando eles obtiveram a classe form-control, não se aplica se você a usar form-inlineno formulário.

Você pode dar uma olhada no bootstrap.css (ou .less, o que você preferir), onde você 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%;
    }

    [...]
  }
}

Talvez você deva dar uma olhada nos grupos de entrada , pois acho que eles têm exatamente a marcação que você deseja usar (trabalhando aqui ):

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

dê uma olhada em algo como isto:

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

Conforme indicado em uma pergunta semelhante , tente remover instâncias doinput-group classe e veja se isso ajuda.

referindo-se ao bootstrap:

Controles de formulário individuais recebem automaticamente algum estilo global. Todos os elementos textuais,, e com controle .form estão definidos como width: 100%; por padrão. Coloque etiquetas e controles no grupo .form para obter o espaçamento ideal.

Tente algo como abaixo para alcançar o resultado desejado

input {
    max-width: 100%;
}

Com o Bootstrap> 4.1, é apenas um caso de uso das classes de utilitário flexbox. Basta ter um contêiner flexbox dentro da sua coluna e, em seguida, atribuir a todos os elementos contidos na classe "flex-fill". Assim como nos formulários embutidos, você precisará definir as margens / preenchimento dos elementos.

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