如何实现具有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 divs堆叠在一起，以便它们出现在标记中：

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

有什么想法吗？

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>