インラインフォーム内の全幅テキスト入力をブートストラップする

コンテナー領域の幅全体に収まるテキストボックスを作成するのに苦労しています。

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

上記を実行すると、予想どおり、2つのフォーム要素はインラインになりますが、せいぜい数列を超えないようにしてください。Firebugでcol-md-12divにカーソルを合わせると、予想される全幅を占めていることがわかります。埋められないように見えるのは、テキスト入力だけです。インラインの幅の値を追加してみましたが、何も変わりませんでした。これは簡単なはずですが、今は本当に馬鹿げているように感じます。

ここにフィドルがあります：http : //jsfiddle.net/52VtD/4119/embedded/result/

編集：

選ばれた答えはあらゆる点で徹底的であり、素晴らしい助けです。それは私が最終的に使用したものです。しかし、私の最初の問題は、実際にはVisual Studio 2013内のデフォルトのMVC5テンプレートの問題だったと思います。これには、Site.cssに含まれていました。

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

明らかにそれがテキスト入力の適切な拡張を妨げていました...将来のASP.NETテンプレートユーザーへの公正な警告...

ブートストラップのドキュメントはこれについて言っています：

カスタム幅が必要です入力、選択、テキストエリアは、ブートストラップではデフォルトで100％幅です。インラインフォームを使用するには、内部で使用されるフォームコントロールに幅を設定する必要があります。

すべてのフォーム要素がクラスを取得したときに取得するデフォルトの幅100％は、フォームでクラスform-controlを使用する場合は適用されませんでしたform-inline。

この部分が見つかるbootstrap.css（または.less、好きなもの）を見ることができます。

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

    [...]
  }
}

多分あなたはinput-groupsを見ておくべきでしょう、私はそれらがあなたが使いたいマークアップを正確に持っていると思うので（ここで作業フィドル）：

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

次のようなものを見てください：

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

同様の質問で述べたように、input-groupクラスのインスタンスを削除してみて、それが役立つかどうかを確認してください。

ブートストラップについて：

個々のフォームコントロールは自動的にグローバルスタイルを受け取ります。.form-controlを持つすべてのテキスト、、および要素は、幅100％に設定されます。デフォルトでは。ラベルとコントロールを.form-groupでラップして、最適な間隔にします。

希望する結果を達成するために、以下のようなことを試してください

input {
    max-width: 100%;
}

Bootstrap> 4.1では、フレックスボックスユーティリティクラスを使用する場合にすぎません。列内にflexboxコンテナーを配置し、その中のすべての要素に「flex-fill」クラスを指定します。インラインフォームと同様に、要素のマージン/パディングを自分で設定する必要があります。

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