Bootstrap saisie de texte pleine largeur dans un formulaire en ligne

J'ai du mal à créer une zone de texte qui s'adapte à toute la largeur de ma zone de conteneur .

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

Lorsque je fais ce qui précède, les deux éléments du formulaire sont en ligne, comme je m'y attendais, mais ne prennent pas plus de quelques colonnes, au mieux. Le survol du col-md-12div dans Firebug montre qu'il prend toute la largeur attendue. C'est juste la saisie de texte qui ne semble pas remplir. J'ai même essayé d'ajouter une valeur de largeur en ligne mais cela n'a rien changé. Je sais que cela devrait être simple, me sentir vraiment stupide maintenant.

Voici un violon: http://jsfiddle.net/52VtD/4119/embedded/result/

ÉDITER:

La réponse choisie est approfondie à tous points de vue et d'une aide précieuse. C'est ce que j'ai fini par utiliser. Cependant, je pense que mon problème initial était en fait un problème avec le modèle MVC5 par défaut dans Visual Studio 2013. Il contenait ceci dans Site.css:

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

De toute évidence, cela empêchait la saisie de texte de s'étendre de manière appropriée ... Avertissement juste aux futurs utilisateurs de modèles ASP.NET ...

La documentation de bootstrap dit à ce sujet :

Nécessite des largeurs personnalisées Les entrées, les sélections et les zones de texte ont une largeur de 100% par défaut dans Bootstrap. Pour utiliser le formulaire en ligne, vous devrez définir une largeur sur les contrôles de formulaire utilisés dans.

La largeur par défaut de 100% que tous les éléments du formulaire obtiennent lorsqu'ils obtiennent la classe form-controlne s'applique pas si vous utilisez la form-inlineclasse sur votre formulaire.

Vous pouvez jeter un œil au bootstrap.css (ou .less, comme vous préférez) où vous trouverez cette partie:

.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%;
    }

    [...]
  }
}

Vous devriez peut-être jeter un œil aux groupes d'entrée , car je suppose qu'ils ont exactement le balisage que vous souhaitez utiliser (travail de violon ici ):

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

jetez un œil à quelque chose comme ceci:

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

Comme indiqué dans une question similaire , essayez de supprimer des instances de la input-groupclasse et voyez si cela aide.

se référant à bootstrap:

Les contrôles de formulaire individuels reçoivent automatiquement un style global. Tous les éléments textuels, et avec .form-control sont définis sur width: 100%; par défaut. Enveloppez les étiquettes et les contrôles dans .form-group pour un espacement optimal.

Essayez quelque chose comme ci-dessous pour obtenir le résultat souhaité

input {
    max-width: 100%;
}

Avec Bootstrap> 4.1, il s'agit simplement d'utiliser les classes utilitaires flexbox. Il suffit d'avoir un conteneur flexbox dans votre colonne, puis de donner à tous les éléments qu'il contient la classe "flex-fill". Comme pour les formulaires en ligne, vous devrez définir vous-même les marges / le remplissage des éléments.

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