如何实现带有spanX属性和标签的表单？

Question

我试图实现以下形式：

目前我实现了这种方式：

<div class="row"> 
    <label class="span4" for="name">Name</label> 
    <label class="span4" for="email">Email Address</label> 
</div> 
<div class="controls controls-row"> 
    <input class="span4" type="text" name="name" value="" placeholder=""> 
    <input class="span4" type="email" name="email" value="" placeholder=""> 
</div> 

<label for="message">Message</label> 

<div class="controls"> 
    <textarea class="span8" name="message" rows="18"></textarea> 
</div> 

其中桌面上工作得很好，但不工作，所以以及在响应模式下，因为span div彼此堆叠以便它们出现在标记中：

实现此表单的最佳方式是什么？ The documentation描述了上面我使用的表单的网格大小类，但是这些示例都没有标签，所以我真的不知道哪个是最好的方法来正确执行此操作。

任何想法？

Answer 1

我想我明白了。需要使用包装器span4和嵌套行。 这似乎工作：

<div class="row"> 
    <div class="span4"> 
     <div class="row"> 
      <label class="span4" for="name">Name</label>      
     </div> 
     <div class="controls controls-row"> 
      <input class="span4" type="text" name="name" value="" placeholder=""> 
     </div> 
    </div> 

    <div class="span4"> 
     <div class="row"> 
      <label class="span4" for="email">Email Address</label> 
     </div> 
     <div class="controls controls-row"> 
      <input class="span4" type="email" name="email" value="" placeholder=""> 
     </div> 
    </div> 
</div> 

<label for="message">Message</label> 

<div class="controls"> 
<textarea class="span8" name="message" rows="18"></textarea> 
</div> 

Answer 2

，你将不得不调整了一下你的CSS，但喜欢的事：

<div class="row"> 
    <label class="span4" for="name">Name</label> 
    <input class="span4" type="text" name="name" value="" placeholder=""> 
</div> 
<div class="controls controls-row"> 
    <input class="span4" type="email" name="email" value="" placeholder=""> 
    <label class="span4" for="email">Email Address</label> 
</div> 

如果您span4类使用display="block"和两个div的使用float=left它应该好看两种布局。虽然可能需要一些更多的调整。

点是，如果你有div内的元素，他们会一起打破行（除非你的位置，然后所有绝对）。