如何使用佈局網格在引導程序中標記表單域

Question

我發現了一種使用引導程序網格系統佈局表單域的方法。請參閱jsfiddle鏈接。 http://jsfiddle.net/kUNVs/

當我在郵政編碼字段上放置標籤時，一切看起來都不錯。但是，當我使用相同的「邏輯」將標籤應用於城市字段時，它位於郵政編碼標籤下。或者在第二個例子中，我完全用軟管佈局。

所以問題是，基於上面jsfiddle中的示例，如何向城市字段添加標籤並將其放在城市上方而不是郵政編碼？

我試過這個。

<label for="zipcode">Zip Code</label> 
<label for="city">City</label> 
<div class="controls controls-row"> 
<input type="text" id="zipcode" class="span1" placeholder="Zipcode"/> 
<input type="text" id="city" class="span2" placeholder="City"/> 
</div> 

這

<div class="controls controls-row"> 
<label for="zipcode">Zip Code</label> 
<input type="text" id="zipcode" class="span1" placeholder="Zipcode"/> 
<label for="city">City</label> 
<input type="text" id="city" class="span2" placeholder="City"/> 
</div> 

Answer 1

這應該給你一個良好的開端：

<form> 
    <div class="controls controls-row"> 
     <label for="street">Address</label> 
     <input type="text" class="span3" id="street" name="street" placeholder="Street"/> 
    </div> 
    <div class="controls controls-row"> 
     <div class="row"> 
      <div class="span2"> 
       <label for="zipcode">Zip</label> 
       <input type="text" id="zipcode" class="span1" placeholder="Zipcode"/> 
      </div> 
      <div class="span4"> 
       <label for="city">City</label> 
       <input type="text" id="city" class="span2" placeholder="City"/> 
      </div> 
     </div> 
    </div> 
</form> 

Live Demo - Basic

我只是增加了一個排的郵政編碼和城市usi ng兩個跨度（.span2和.span4）將它們分開。如果我是你，我還會更新輸入上的跨度類以匹配它們的容器跨度。

Live Demo - With Input Spans