2

フォーム レイアウトを操作するブートストラップの問題に対する答えを探していました。これまでのところ、運が悪い!!

目的：

タブレット/デスクトップ/iPhone で機能する登録フォームを作成する

問題：

フォームをボックス化するために必要なすべての css があるため、サムネイルを使用しました。私はform-horizo​​ntalを使用しました。デスクトップ上のレイアウトはOK、すべてが揃っています。iPadで見るまで（縦）：下の写真。

-- 申し訳ありませんが、初めて投稿するので、画像を投稿するのに十分なポイントがありません。次のようになります。

http://dl.dropbox.com/u/21743176/Screen%20Shot%202012-11-26%20at%203.26.13%20PM.png

最初の入力ボックスは span6 を使用していますが、残りは使用していません。span6 を使用しても、コントロール (ラベルと入力) は中央に配置されません。ラベルの幅を小さくして中央に揃えることができますが、それは特定の @media 幅などを追加することを意味します.

これが私のhtmlのスナップショットです：

<div class="container">
        <div class="row-fluid">
            <div class="section">
                <ul class="thumbnails row">
                    <li class="span6 offset3">
                        <div class="thumbnail">
                                <div class="caption">
                                    <legend><h5><i class="icon-pencil"></i>    Sign-up</h5></legend>
                                    <form action="signup/user_signup" class="form-horizontal" method="POST" id="signup-form">
                                        <fieldset>
                                        <div class="control-group" id="Name">
                                            <label for="inputName" class="control-label">Name</label>
                                            <div class="controls">
                                                <input type="text" name="inputName" class="span6"/>
                                            </div>
                                        </div>
                                        <div class="control-group" id="Email">
                                            <label for="inputEmail" class="control-label">Email</label>
                                            <div class="controls">
                                                <input type="text" name="inputEmail" />
                                            </div>
                                        </div>
                                        <div class="control-group" id="Username">
                                            <label for="inputUsername" class="control-label">Username</label>
                                            <div class="controls">
                                                <input type="text" name="inputUsername" id="inputUsername"/>
                                            </div>
                                        </div>
                                        <div class="control-group" id="Pwd">
                                            <label for="inputPwd" class="control-label">Password</label>
                                            <div class="controls">
                                                <input type="password" name="inputPwd" id="inputPwd"/>
                                            </div>
                                        </div>
                                         <div class="control-group" id="CPwd">
                                            <label for="inputConfirmPwd" class="control-label">Confirm Password</label>
                                            <div class="controls">
                                                <input type="password" name="inputConfirmPwd" id="inputConfirmPwd"/>
                                            </div>
                                        </div>
                                        <div class="control-group" id="TNC">
                                            <div class="controls">
                                                <label class="checkbox">
                                                    <input type="checkbox"> Accept terms and conditions
                                                </label>
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <div class="controls">
                                                <button type="cancel" class="btn">Cancel</button>
                                                <button type="submit" class="btn btn-primary">Send</button>
                                            </div>
                                        </div>
                                        </fieldset>
                                    </form>
                                </div>
                        </div>
                    </li>
                    <li class="span3"></li>
                </ul>
            </div>
        </div>
    </div>

質問:

form-inline または form-horizo​​ntal はいつ使用しますか。form-horizo​​ntal を使用するには、幅の広いページが必要であると言う人もいますが、それが本当かどうかはわかりません。

それで、私のhtml/アプローチが良くないかどうか教えてください。

4

1 に答える 1

0

フィドル

width: 100% を使用して、テキスト ボックスをコンテナー内に強制的に配置する例をいくつか見つけました。それは大きなページを中心にしていますが、テーブルではウェルが端まで広がり、電話ではフォーム水平からフォームインラインに切り替わります.

.my-input
{
    width: 100%;
    padding: 4px 0 4px 0 !important;
}

 <input class="my-input" maxlength="80" type="text" name="inputName"  />
于 2013-03-28T03:16:20.237 に答える