自舉表單甚至不包括

我已經創建了一個表單並希望確保所有跨度排成直線並且是方形的。但是，即使所有跨度加起來爲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="[email protected]"> 
            <label class="span2" for="input02"> 
             Confirm Email 
            </label> 
            <input type="text" class="span4" id="input02" placeholder="[email protected]"> 
           </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/[email protected]/8409032538/in/photostream

來源

2013-01-23 JGVM

有人嗎？任何幫助將超級讚賞... – JGVM

所以這是與你問的另一個問題有關嗎？ http://stackoverflow.com/questions/14469605/bootstrap-does-not-produce-even-spans –

你只貼一個片段，所以我不知道你是怎麼INTEGRAT在你的頁面的其餘部分的形式，而是一個row-fluid可以幫助：

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

我試了一下，看起來好多了。

更多提示：

一些標籤丟失類control-label。由於control-label的行高調整，這是非常重要的。
取決於形式的完整寬度，一些標籤可能不適合span1在同一行（在我的快速測試的情況下）
和一般的設計提示：用3標籤/輸入對斷裂的最後一行佈局有點。通常，你試圖堅持一定的垂直定位。

希望這有助於

來源

2013-02-01 20:22:52

自舉表單甚至不包括

回答

相關問題