css - 如何在控制行内使用标签

Question

我正在尝试使用 Boostrap 来布局具有水平行输入的表单（a la“控制行”），但标签位于表单输入上方。有关示例，请参见下面的布局。

Boostrap可以做到这一点吗？我试图避免诉诸一百万行/跨度# div，但如果没有大量自定义 CSS，就找不到另一种实现方式。我目前的计划是使用表格进行测试：/ 请让我摆脱这种命运！

标签1 标签2
| 输入 | | 输入 |

标签 3
| 长输入 |

标签 4 标签 5
| 输入 | | 输入 |

Answer 1

我能够在不使用表格的情况下完成这项工作，使用控制行和控制组类的组合。

<div class="container">
<form>
    <div class="controls-row">
        <div class="control-group">
            <label for="first-name" class="control-label">First Name:</label>
            <div class="controls">
                <input type="text" id="first-name" name="FirstName" />
            </div>                
        </div>
        <div class="control-group">
            <label for="middle-initial" class="control-label">M.I.:</label>
            <div class="controls">
                <input type="text" id="middle-initial" name="MiddleInitial" class="input-mini" />
            </div>                
        </div>
        <div class="control-group">
            <label for="last-name" class="control-label">Last Name:</label>
            <div class="controls">
                <input type="text" id="last-name" name="LastName" />
            </div>                
        </div>
    </div>
    <div class="control-row">
         <div class="control-group">
            <label for="ssn" class="control-label">Social Security Number:</label>
            <div class="controls">
                <input type="text" id="ssn" name="SocialSecurityNumber" />
            </div>                
        </div>
        <div class="control-group">
            <label for="dob" class="control-label">Date of Birth:</label>
            <div class="controls input-append">
                <input type="text" id="dob" name="DateOfBirth" />
                <a href="#" class="btn btn-small"><i class="icon-calendar"></i></a>
            </div>
        </div>           
    </div>
</form> 

​​​​​​​​​​​​​​​​​</p>

不过，为了让它正常工作（因为控制组 div 是display: block;，我必须重写该类并添加vertical-align: top;以下内容）：

.control-group {
    display: inline-block;
    vertical-align: top;
}

结果是这样的：http: //jsfiddle.net/bhGyz/