☰

Bootstrap 3の入力幅について質問する

tag-icon • tag-icon css twitter-bootstrap twitter-bootstrap-3
Bootstrap 3の入力幅について質問する

再度更新:質問を本当に理解せずに回答を追加する人がいないように、トップの回答を選択してこの質問をクローズします。実際には、グリッドを使用したり、追加の CSS を追加したりせずに、組み込み機能でこれを行う方法はありません。help-blockたとえば、短い入力を超える必要がある要素を扱う場合、グリッドはうまく機能しませんが、それらは「組み込み」されています。それが問題になる場合は、BS3 のディスカッションで見つけることができる追加の CSS クラスを使用することをお勧めします。ここBS4がリリースされたので、付属のサイズこれを管理するためのスタイルがあるため、これはもうあまり関係がなくなるでしょう。この人気のある SO の質問に対する有益な情報を提供してくださった皆様に感謝します。

アップデート：この疑問は未解決のままである。内蔵BSの機能でグリッドに頼らずに入力幅を管理できます（場合によっては独立して管理する必要があります）。私はすでにカスタムクラスを使用してこれを管理しているので、これは基本的な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

あなたがやりたいことは確かに達成可能です。

What you want is to wrap each 'group' in a row, not the whole form with just one row. Here:

<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>

The NEW jsfiddle I made: NEW jsfiddle

Note that in the new fiddle, I've also added 'col-xs-5' so you can see it in smaller screens too - removing them makes no difference. But keep in mind in your original classes, you are only using 'col-lg-1'. That means if the screen width is smaller than the 'lg' media query size, then the default block behaviour is used. Basically by only applying 'col-lg-1', the logic you're employing is:

IF SCREEN WIDTH < 'lg' (1200px by default)

   USE DEFAULT BLOCK BEHAVIOUR (width=100%)

ELSE

   APPLY 'col-lg-1' (~95px)

See Bootstrap 3 grid system for more info. I hope I was clear otherwise let me know and I'd elaborate.

おすすめ記事