0

フォームを作成しましたが、すべてのスパンが整列し、正方形であることを確認したいと考えています。ただし、すべてのスパンを合計すると 12 になりますが、各行の幅は異なります。それはただの方法ですか、それとも何か間違ったことをしていますか?

<div class="container ">

                            <form class="well form-inline">
                                <div class="controls controls-row">  
                                    <label class="span1" for="input01">
                                        Prefix
                                    </label>
                                    <input type="text" class="span1" id="input01" placeholder="Dr."><label class="span1" for="input02">
                                        First Name
                                    </label>
                                    <input type="text" class="span3" id="input02" placeholder="John">
                                    <label class="control-label span1" for="input03">
                                        last Name
                                    </label>
                                    <input type="text" class="span3" id="input03" placeholder="Doe">
                                    <label class="control-label span1" for="input04">
                                        Suff
                                    </label>
                                    <input type="text" class="span1" id="input04" placeholder="Jr.">
                                </div>
                                <div class="controls controls-row">  
                                    <label class="span1" for="input01">
                                        Company
                                    </label>
                                    <input type="text" class="span5" id="input01" placeholder="Sample LLC">
                                    <label class="span1" for="input02">
                                        Title
                                    </label>
                                    <input type="text" class="span5" id="input02" placeholder="Director of Samples">
                                </div>
                                <div class="controls controls-row">  
                                    <label class="span1" for="input01">
                                        Address 1
                                    </label>
                                    <input type="text" class="span5" id="input01" placeholder="Address Line 1">
                                    <label class="span1" for="input02">
                                        Address 2
                                    </label>
                                    <input type="text" class="span5" id="input02" placeholder="Address Line 2">
                                </div>
                                <div class="controls controls-row">  
                                    <label class="span1" for="input01">
                                        Cntry
                                    </label>
                                    <select class="input-medium span2 countries" data-country="US"></select>
                                    <label class="span1" for="input01">
                                        City
                                    </label>
                                    <input type="text" class="span2" id="input02" placeholder="City">
                                    <label class="span1" for="input02">
                                        St/Prv
                                    </label>
                                    <select class="input-medium span2 states" data-country="US" data-state="CA"></select>
                                    <label class="span1" for="input01">
                                        Zip
                                    </label>
                                    <input type="text" class="span2" id="input02" placeholder="City">
                                </div>
                                <div class="controls controls-row">  
                                    <label class="span1" for="input01">
                                        Email
                                    </label>
                                    <input type="text" class="span5" id="input01" placeholder="you@yourdomain.com">
                                    <label class="span2" for="input02">
                                        Confirm Email
                                    </label>
                                    <input type="text" class="span4" id="input02" placeholder="you@yourdomain.com">
                                </div>
                                <div class="controls controls-row">  
                                    <label class="span1" for="input01">
                                        Phone
                                    </label>
                                    <input type="text" class="span3" id="input01" placeholder="">
                                    <label class="span1" for="input02">
                                        Cell
                                    </label>
                                    <input type="text" class="span3" id="input02" placeholder="">
                                    <label class="span1" for="input02">
                                        Fax
                                    </label>
                                    <input type="text" class="span3" id="input02" placeholder="">
                                </div>
                            </form>
                        </div>

スクリーンショットはこちら: http://www.flickr.com/photos/92503149@N07/8409032538/in/photostream

4

1 に答える 1

0

スニペットを投稿しただけなので、フォームをページの残りの部分にどのように統合するかはわかりませんが、row-fluid役立つ場合があります。

<form class="well form-inline row-fluid">

私はそれを試してみましたが、すでにずっと良く見えます。

その他のヒント:

  • 一部のラベルにクラスがありませんcontrol-label。行の高さを調整するため、これは全体的に重要control-labelです。
  • フォームの完全な幅によっては、一部のラベルがspan11 行に収まらない場合があります (私の簡単なテストではそうでした)。
  • 一般的なデザインのヒント: 3 つのラベル/入力ペアを含む最後の行は、レイアウトを少し壊します。通常、特定の垂直位置に固執しようとします。

お役に立てれば

于 2013-02-01T20:22:52.267 に答える