レイアウトに影響を与えずに Bootstrap 3 フォームの入力幅を制御するにはどうすればよいですか?

Bootstrap 3 の入力幅

Bootstrap 3 では、入力幅の管理が課題となる場合があります。ドキュメントでは .col-lg-x クラスの使用を推奨していますが、この解決策には制限があります。

元の問題:

元の質問は、入力を設定できないことが原因でしたコンテナのレイアウトに影響を与えることなく、.col-lg-x を使用して幅を調整します。このクラスはコンテナ自体にのみ適用できるため、望ましくないレイアウトの問題が発生します。

解決策:

実際的な解決策は、各入力グループを独自の行内でラップすることです。 。そうすることで、.col-lg-x クラスを個々のグループに適用し、フォーム全体の構造を維持しながらグループの幅を制御できます。

コード例:

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

注:

さまざまな画面サイズ間で一貫したサイズ設定を実現するために、小さい画面には .col-xs-5 クラスを含めることができます。これを削除しても全体的な機能には影響しません。

結論:

入力グループを個別の行でラップし、.col-lg-x クラスを使用することで、開発者は効果的にグリッド システムやカスタム CSS クラスに頼ることなく、Bootstrap 3 で入力幅を管理します。

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