[解決済み] Bootstrap3での入力幅について

質問

もう一度アップデートしてください。 質問をよく理解せずに回答を追加する人が出ないように、トップアンサーを選択してこの質問を閉じています。現実には、グリッドを使用したり、余分なCSSを追加することなく、ビルドイン機能でそれを行う方法はありません。グリッドは、以下のような場合、うまく機能しません。 help-block 要素は、例えば短い入力の先に行く必要がありますが、それらは「ビルドイン」です。もし、それが問題であれば、BS3のディスカッションにあるような特別なCSSクラスを使うことをお勧めします。 こちら . BS4 がリリースされたので、同梱の サイジング スタイルで管理することができますので、これはあまり長くは関係ないでしょう。この人気のあるSOの質問に対する良い意見に感謝します。

更新しました。 に関するものであるため、この質問は未解決のままです。 ビルトイン の機能で、グリッドに頼らずに入力幅を管理することができます（時には独立して管理する必要があります）。私はすでにカスタムクラスを使ってこれを管理しているので、これは基本的なCSSのハウツーではありません。 タスクはBSにあります 機能ディスカッションリスト で、まだ対応されていません。

オリジナルの質問です。 BS 3で入力幅を管理する方法を見つけた方はいらっしゃいますか？ 私は現在、その機能を追加するためにいくつかのカスタム・クラスを使っていますが、ドキュメント化されていないオプションを見逃しているかもしれません。

現在のドキュメントでは、.col-lg-x を使用するように書かれていますが、明らかにうまくいきません。なぜなら、それはコンテナ div にしか適用できず、あらゆる種類のレイアウト/フロートの問題を引き起こしてしまうからです。

これはフィドルです。奇妙なことに、このフィドルではフォームグループのサイズを変更することすらできません。

http://jsfiddle.net/tX3ae/

<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つの行で包むことであり、フォーム全体を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>

私が作ったNEW jsfiddle。 NEW 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)

参照 Bootstrap 3 グリッドシステム をご覧ください。そうでなければ、もっと詳しく説明します。