twitter-bootstrap - 如何实现具有 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>

在桌面上运行良好，但在响应模式下运行不佳，因为跨度 div 相互堆叠，以便它们出现在标记中：

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

有任何想法吗？

Answer 1

您将不得不稍微调整一下您的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 中有元素，它们会将行分开（除非您绝对定位）。

Answer 2

我想我明白了。需要使用包装器 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>