Bootstrap 3 フォームで入力幅を制御するにはどうすればよいですか?

Bootstrap 3 の入力幅管理

Bootstrap 3 では、フォーム入力の幅を制御するための限られた範囲のオプションが提供されます。元の質問が示唆しているように、.col-lg-x を使用しても望ましい結果は得られません。これは、.col-lg-x はコンテナ div にのみ適用できるため、レイアウトの問題が発生するためです。

代替アプローチ

必要な機能を実現するには、ラップすることを検討してください。フォーム全体を 1 つの行で囲むのではなく、各入力グループを独自の行に配置します。例:

<code class="html"><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></code>

このアプローチでは、各入力グループが個別の .row でラップされ、画面サイズに関係なく入力幅が一定に保たれます。さらに、入力コンテナに .col-lg-5 を追加すると、小さな画面でも入力幅を制御できます。

制限事項

注意が重要です。元の質問は、グリッドに頼らずに組み込みの BS 機能を使用したソリューションを目的としていました。ただし、ソリューションが示すように、組み込みオプションであっても、目的の動作を実現するにはグリッドの使用が必要です。

以上がBootstrap 3 フォームで入力幅を制御するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。