Bootstrap input di testo a larghezza intera in formato inline

Sto lottando per creare una casella di testo che si adatti all'intera larghezza dell'area del mio contenitore .

<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 faccio quanto sopra, i due elementi del modulo sono in linea, come mi aspetto, ma nella migliore delle ipotesi non occupano più di alcune colonne. Passare il mouse sopra il col-md-12div in firebug mostra che occupa l'intera larghezza prevista. È solo l'input di testo che non sembra riempire. Ho anche provato ad aggiungere un valore di larghezza in linea ma non ha cambiato nulla. So che dovrebbe essere semplice, ora mi sento davvero stupido.

Ecco un violino: http://jsfiddle.net/52VtD/4119/embedded/result/

MODIFICARE:

La risposta selezionata è completa in ogni modo e un aiuto meraviglioso. È quello che ho finito per usare. Tuttavia, penso che il mio problema iniziale fosse in realtà un problema con il modello MVC5 predefinito in Visual Studio 2013. Lo conteneva in Site.css:

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

Ovviamente questo stava bloccando l'espansione del testo in input in modo appropriato ... Un avvertimento equo ai futuri utenti del modello ASP.NET ...

I documenti bootstrap parlano di questo :

Richiede larghezze personalizzate Gli input, le selezioni e le aree di testo sono larghe al 100% per impostazione predefinita in Bootstrap. Per utilizzare il modulo incorporato, dovrai impostare una larghezza sui controlli del modulo utilizzati all'interno.

La larghezza predefinita del 100% che ottengono tutti gli elementi del modulo quando ottengono la classe form-controlnon si applica se si utilizza la form-inlineclasse nel modulo.

Puoi dare un'occhiata al bootstrap.css (o .less, qualunque cosa tu preferisca) dove troverai questa 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%;
    }

    [...]
  }
}

Forse dovresti dare un'occhiata ai gruppi di input , dato che immagino che abbiano esattamente il markup che vuoi usare (lavorando il violino qui ):

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

dai un'occhiata a qualcosa del genere:

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

Come indicato in una domanda simile , prova a rimuovere le istanze della input-groupclasse e vedi se questo aiuta.

riferendosi al bootstrap:

I controlli dei singoli moduli ricevono automaticamente uno stile globale. Tutti gli elementi testuali, e, con .form-control sono impostati su larghezza: 100%; per impostazione predefinita. Avvolgere etichette e controlli in .form-group per una spaziatura ottimale.

Prova qualcosa come qui sotto per ottenere il risultato desiderato

input {
    max-width: 100%;
}

Con Bootstrap> 4.1 è solo un caso di utilizzo delle classi di utilità flexbox. Basta avere un contenitore flexbox all'interno della colonna, quindi assegnare a tutti gli elementi al suo interno la classe "flex-fill". Come per i moduli in linea, dovrai impostare tu stesso i margini / riempimento degli elementi.

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