ブートストラップ3の入力幅
もう一度更新します。 この質問をよく理解せずに回答を追加できないように、トップの回答を選択してこの質問を閉じます。実際には、グリッドを使用したり追加のCSSを追加したりせずに、機能を組み込むことでそれを実行する方法はありません。たとえば、短い入力を超える必要があるhelp-block要素を扱う場合、グリッドはうまく機能しませんが、それらは「組み込み」です。それが問題であるならば、私はあなたがBS3議論 ここ で見つけることができる余分なcssクラスを使うことを勧めます。 BS4がリリースされたので、これを管理するために含まれている sizing スタイルを使うことは可能です。この人気のSO質問に対するご意見ありがとうございました。
更新： この質問は、グリッドに頼らずに入力幅を管理するためのBSの組み込み機能性に関するものであるため、未解決のままです（場合によっては個別に管理する必要があります）。これを管理するために既にカスタムクラスを使用しているので、これは基本的なCSSの使い方ではありません。このタスクはBS の機能ディスカッションリスト にあり、そしてまだ対処されていません。
元の質問： BS 3で入力幅を管理する方法を誰かが考えていますか？私は現在その機能を追加するためにいくつかのカスタムクラスを使っていますが、文書化されていないオプションをいくつか見逃しているかもしれません。
現在のドキュメントでは.col-lg-xを使用するように言われていますが、コンテナdivにしか適用できないため、これは明らかに機能しません。
これが謎です。変なことに、フォームグループのサイズを変更することすらできません。
<form role="form" class="row">
<div class="form-group col-lg-1">
<label for="code">Name</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-lg-1 ">
<label for="code">Email</label>
<input type="text" class="form-control input-normal">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
あなたがやりたいことは確かに達成可能です。
必要なのは、フォーム全体ではなく、1つの行で各「グループ」をラップすることです。ここに：
<div class="container">
<h1>My form</h1>
<p>How to make these input fields small and retain the layout.</p>
<form role="form">
<div class="row">
<div class="form-group col-lg-1">
<label for="code">Name</label>
<input type="text" class="form-control" />
</div>
</div>
<div class="row">
<div class="form-group col-lg-1 ">
<label for="code">Email</label>
<input type="text" class="form-control input-normal" />
</div>
</div>
<div class="row">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</div>
私が作った新しいjsfiddle： 新しいjsfiddle
新しいフィドルには 'col-xs-5'も追加したので、小さい画面でも表示できるようになりました。削除しても違いはありません。しかし、元のクラスでは覚えておいてください。あなたは 'col-lg-1'だけを使っています。つまり、画面幅が「lg」メディアクエリサイズより小さい場合、デフォルトのブロック動作が使用されます。基本的に 'col-lg-1'を適用するだけで、採用しているロジックは次のようになります。
IF SCREEN WIDTH < 'lg' (1200px by default)
USE DEFAULT BLOCK BEHAVIOUR (width=100%)
ELSE
APPLY 'col-lg-1' (~95px)
ブートストラップ3グリッドシステム を参照してください。そうでなければ私に知らせて私は精巧だった私は私が明確だったことを願っています。
ブートストラップ3
カスタムスタイルを簡単に作成できます。
.form-control-inline {
min-width: 0;
width: auto;
display: inline;
}
それを次のようにフォームコントロールに追加します。
<div class="controls">
<select id="expirymonth" class="form-control form-control-inline">
<option value="01">01 - January</option>
<option value="02">02 - February</option>
<option value="03">03 - March</option>
<option value="12">12 - December</option>
</select>
<select id="expiryyear" class="form-control form-control-inline">
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
</div>
これにより、HTMLのレイアウトに余分なマークアップを追加する必要がなくなります。
ASP.net MVCはContent-Site.cssに行き、この行を削除またはコメントします。
input,
select,
textarea {
/*max-width: 280px;*/
}
現在のドキュメントでは、.col-xs-xを使うように言われていますが、lgは使わないでください。それから私はフィドルで試してみて、それはうまくいくようです：
http://jsfiddle.net/tX3ae/225/
レイアウトを維持するために、多分あなたはこのようにクラス "row"を置く場所を変えることができます：
<div class="container">
<h1>My form</h1>
<p>How to make these input fields small and retain the layout.</p>
<div class="row">
<form role="form" class="col-xs-3">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" >
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" name="email">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
私はあなたがcol-lg-4の中に、そしてform-groupの中に入力をラップする必要があると思います、そしてそれはすべてform-horizontalに含まれます。
<form class="form form-horizontal">
<div class="form-group">
<div class="col-md-3">
<label>Email</label>
<input type="email" class="form-control" id="email" placeholder="email">
</div>
</div>
...
</form>
Bootplyのデモ - http://bootply.com/78156
編集： ブートストラップ3のドキュメントから..
ブートストラップでは、入力、選択、およびテキストエリアはデフォルトで100％幅です。インラインフォームを使用するには、その中で使用されているフォームコントロールに幅を設定する必要があります。
そのため、CSSを使用して特定の幅を設定するという方法もあります。
.form-control {
width:100px;
}
あるいは、col-sm-*を `form-group 'に適用してください。
<div class="form-group col-lg-4">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
入力を制限するためにform.groupにクラスを追加します
Visual Studio 15でMaster.Siteテンプレートを使用している場合、ベースプロジェクトには "Site.css"があり、これはフォームコントロールフィールドの幅を超えています。
私のテキストボックスの幅を約300px幅より広くすることはできませんでした。私はすべてを試してみましたが、何もうまくいきませんでした。 Site.cssに問題の原因となっている設定があることがわかりました。
これを取り除くと、あなたはあなたのフィールド幅を制御することができます。
/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
max-width: 280px;
}
私はこれが古いスレッドであることを知っていますが、私はインラインフォームで同じ問題を経験しました、そして上記のオプションのどれも問題を解決しませんでした。だから私はそのように私のインラインフォームを修正しました： -
<form class="form-inline" action="" method="post" accept-charset="UTF-8">
<div class="row">
<div class="form-group col-xs-7" style="padding-right: 0;">
<label class="sr-only" for="term">Search</label>
<input type="text" class="form-control" style="width: 100% !important;" name="term" id="term" placeholder="Search..." autocomplete="off">
<span class="help-block">0 results</span>
</div>
<div class="form-group col-xs-2">
<button type="submit" name="search" class="btn btn-success" id="search">Search</button>
</div>
</div>
</form>
それが私の解決策でした。ちょっとハックなハックですが、インラインフォームの仕事をしました。
ブートストラップ3
.form-controlを持つすべてのテキスト<input>、<textarea>、および<select>要素はwidth：100％に設定されています。デフォルトで.
http://getbootstrap.com/css/#forms-example
場合によっては、入力に必要な最大幅を手動で設定する必要があるようです。
とにかく、あなたの例はうまくいきます。大画面でチェックするだけで、名前と電子メールフィールドが2/12のwith（col-lg-1 + col-lg-1で12列あります）を確認できます。しかし、画面が小さい場合（ブラウザのサイズを変更するだけ）、入力は行の終わりまで拡大されます。
あなたは単純なcssをあきらめる必要はありません:)
.short { max-width: 300px; }
<input type="text" class="form-control short" id="...">
Style属性を追加することも、cssファイルにinputタグの定義を追加することもできます。
オプション1：スタイル属性を追加する
<input type="text" class="form-control" id="ex1" style="width: 100px;">
オプション2：CSSでの定義
input{
width: 100px
}
あなたは自動で100pxを変えることができます
私は私が助けることができると思います。
Bootstrapの入力要素の幅を好みに合わせて単純に縮小または拡大したい場合は、CSSでmax-widthを使用します。
これは私が作成した非常に単純な例です。
<form style="max-width:500px">
<div class="form-group">
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="Email Address">
</div>
<div class="form-group">
<textarea class="form-control" rows="5" placeholder="Message"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
フォーム全体の最大幅を500ピクセルに設定しました。これにより、Bootstrapのグリッドシステムを使用する必要がなくなり、フォームの応答性も向上します。
ブートストラップは、 '入力フィールド'の属性を制御するために 'form-input'クラスを使用します。単純に、あなたのcssファイルまたはheadセクションに希望の幅、ボーダー、テキストサイズなどを持つあなた自身の 'form-input'クラスを追加してください。
（または、本文セクションの入力属性にsize = '5'インラインコードを直接追加します。）
<script async src="//jsfiddle.net/tX3ae/embed/"></script>
style=""の用語を入力フィールドに追加して定義します。これが最も簡単な方法です。例：
<form>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" style="width:200px;">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" style="width:200px">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
誰もがContentフォルダのsite.cssファイルを見落としているように見える理由はわかりません。このファイルの22行目を見ると、入力を制御するための設定が表示されます。あなたのサイトはこのスタイルシートを参照していないようです。
私はこれを追加しました：
input, select, textarea { max-width: 280px;}
あなたのいじりにそしてそれはちょうどうまく働きます。
Bootstrap.cssやbootstrap.min.cssを決して更新しないでください。そうすることで、ブートストラップが更新されたときに失敗するように設定されます。 site.cssファイルが含まれているのはそのためです。これはあなたがまだあなたが探しているレスポンシブデザインを与えるサイトに変更を加えることができるところです。
私も同じ問題に苦しんでいます、そしてこれが私の解決策です。
HTMLソース
<div class="input_width">
<input type="text" class="form-control input-lg" placeholder="sample">
</div>
入力コードを別のdivクラスで覆う
CSSソース
.input_width{
width: 450px;
}
覆われたdivクラスに幅やマージンを設定します。
ブートストラップの入力幅は常にデフォルトの100％なので、幅はカバーされた幅に従います。
これは最良の方法ではありませんが、私が問題を解決した最も簡単で唯一の解決策です。
これが役に立ったことを願っています。
Bootstrap 3私は以下を使ってNiceレスポンシブフォームレイアウトを実現しました：
<div class="row">
<div class="form-group col-sm-4">
<label for=""> Date</label>
<input type="date" class="form-control" id="date" name="date" placeholder=" date">
</div>
<div class="form-group col-sm-4">
<label for="hours">Hours</label>
<input type="" class="form-control" id="hours" name="hours" placeholder="Total hours">
</div>
</div>