如何使用布局网格在引导程序中标记表单域

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