html - 如何在引导程序中构建一个 2 列视图，顶部有大文本区域

Question

大家好，我正在尝试构建一个添加图片中的视图。我想构建一个包含 2 列的视图（显示表单），看起来像所附图片。我已经有一个看起来像这样的 2 列输入表单，但我不确定要使用哪些元素来构建视图。我将输入元素用于输入表单。我希望它有这样的布局：

       textbox

field1           field2

field3          field4

构建我正在寻找的视图的 HTML 应该是什么样子？

提前致谢，

账单

Answer 1

使用网格尺寸类（.span1to .span12）：

<div class="container">
    <div class="controls">
        <textarea class="span12" type="text"></textarea>
    </div>
    <div class="controls controls-row">
        <input class="span6" type="text"/>
        <input class="span6" type="text"/>
    </div>
    <div class="controls controls-row">
        <input class="span6" type="text"/>
        <input class="span6" type="text"/>
    </div>    
</div>

​<strong>演示。

Answer 2

为什么不将这些字段做成 2 行表？像这样：

<textarea rows="2" cols="30">

</textarea>
<table border="none">
<tr>
<td><input type="text" name="field1" /></td>
<td><input type="text" name="field2" /></td>
</tr>
<tr>
<td><input type="text" name="field3" /></td>
<td><input type="text" name="field4" /></td>
</tr>
</table>