私は自分の画面の幅全体に収まるテキストボックスを作成するのに苦労しています容器エリア。
<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 つのフォーム要素は予想どおりインラインになりますが、せいぜい数列以上を占めることはありません。Firebugcol-md-12で div にマウスを移動すると、予想どおりの幅全体を占めていることがわかります。テキスト入力だけが埋められていないようです。インライン幅の値を追加してみましたが、何も変わりませんでした。これは簡単なはずだとわかっていますが、今は本当に馬鹿げていると感じています。
ここにフィドルがあります:http://jsfiddle.net/52VtD/4119/埋め込み/結果/
編集：
選択した回答はあらゆる点で徹底的で、非常に役立ちました。最終的にこれを使用しました。しかし私の最初の問題は、実際には Visual Studio 2013 内の既定の MVC5 テンプレートの問題だったと思います。Site.css に次の内容が含まれていました。
input,
select,
textarea {
max-width: 280px;
}
明らかに、これによりテキスト入力が適切に拡張されなくなっていました... 将来の ASP.NET テンプレート ユーザーへの公正な警告です...
ベストアンサー1
ブートストラップドキュメントこれについて言う:
カスタム幅が必要です。Bootstrap では、入力、選択、テキストエリアの幅はデフォルトで 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%;
}
[...]
}
}
ぜひご覧になってみてください入力グループ、おそらくあなたが使いたいマークアップが正確に揃っていると思います（動作するフィドルここ):
<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>