[解決済み] Bootstrap のインラインフォームへの全角テキスト入力

質問

の幅に収まるようなテキストボックスを作成するのに苦労しています。 コンテナ 領域があります。

<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つのフォーム要素がインラインで表示されますが、せいぜい数列分しか占めません。また col-md-12 divをfirebugで表示すると、期待通りの全幅を占めていることがわかります。テキスト入力の部分だけが埋まっていないようです。インライン幅の値も追加してみましたが、何も変わりませんでした。簡単なことだとわかっているのですが、今、本当に馬鹿みたいです。

以下はフィドルです。 http://jsfiddle.net/52VtD/4119/embedded/result/

EDITです。

選ばれた回答は、あらゆる点で徹底しており、素晴らしい助言をいただきました。結局、私が使ったのはこれです。 しかし 最初の問題は、実はVisual Studio 2013内のデフォルトのMVC5テンプレートに問題があったのだと思います。Site.cssにこんなのが入ってました。

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

明らかに、テキスト入力が適切に展開されるのを妨害していました...。今後のASP.NETテンプレートのユーザーへの公正な警告です...

解決するには？

ブートストラップ・ドックス には、このように書かれています。 :

カスタム幅が必要 入力、選択、テキストエリアは100%幅です。 のデフォルトは、Bootstrapです。インラインフォームを使用するためには、インラインフォームに の幅は、その中で使用されるフォームコントロールの幅と同じです。

すべてのフォーム要素がクラス 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%;
    }

    [...]
  }
}

を見てみるといいかもしれません。 入力グループ は、まさにあなたが使いたいマークアップを備えていると思うからです（作業用フィドル ここで ):

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