Twitter bootstrap 如何实现具有spanX属性和表单字段标签的表单？

我正在尝试实现以下表单：

目前我是这样实现的：

名称
电子邮件地址
消息

它在桌面上工作正常，但在响应模式下工作不太好，因为span div按它们在标记中出现的顺序彼此堆叠：

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

---

有什么想法吗？

您必须稍微调整一下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中有元素，它们会将行分隔在一起（除非您完全定位所有行）。

我想我知道了。需要使用包装器span4和嵌套行。 这似乎有效：

名称
电子邮件地址
消息

很抱歉，但这对我来说毫无意义。首先，在引导过程中，行不是相邻的。感觉这段代码并没有像预期的那样使用网格系统？如果两个div的float都离开了，那么这两种方法都将是您想要的。当然，对于我在回答中提到的那些类，还有一些工作要做：）@AlexanderRechsteiner有一件事我忘了提，我想让你困惑的是，div元素不是行！！它们仅仅是容器。它们的呈现方式完全取决于css。您在问题中描述的行为是因为两个标签都在同一个容器中。