在 Bootstrap 中创建类似表格的表单答案

【问题标题】：Creating a table-like form in Bootstrap在 Bootstrap 中创建类似表格的表单
【发布时间】：2013-01-19 05:56:52
【问题描述】：

我有一个应该如下所示的表单：

Label:         <input field> Explanation of this field
Another Label: <input field> Lengthy explanation, must wrap.

我正在尝试在 Twitter Bootstrap 中执行此操作，而不使用实际的 <table>。在窄屏幕（如移动设备）上时，表格可以防止字段自动换行。

标准的 Bootstrap 语法是这样的：

<label>Label name</label>
<input type="text" placeholder="Type something…">
<span class="help-block">Example block-level help text here.</span>

有什么方法可以让这些字段变为水平状态？ “form-inline”类没有削减它，因为标签没有对齐，并且“form-horizontal”类没有工作，因为我无法让 class="help-block" 放置右侧的帮助文本。

也许我错过了一个技巧？还是第三方的一点 css 来做更好的表单？

【问题讨论】：

【解决方案1】：

给你，试试这个（仅使用 Bootstrap 类）http://jsfiddle.net/jonschlinkert/pngWh/11/

（只需删除 .warning、.info、.error、.success 类即可删除验证状态。我将它们留在那里以便更容易将我的示例与文档相关联）

这就是它的样子：

【讨论】：