每行

Question

使用Bootstrap，是否有一种优雅的方法可以使每个表单的所有标签在每一行中具有相同的高度，以便输入底部对齐？

请查看此JSFiddle。

我想要的是第二个标签“与左侧相同的高度”的高度与左侧标签的高度相同。或者，如果右侧的输入与另一个输入底部对齐，那也可以。

Answer 1

请参阅updated fiddle

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6">
            <label class="control-label" for="total_contribution_months">A very large and long label for an input</label>
        </div>
        <div class="col-xs-6">
            <label class="control-label" for="age">Same height as left</label>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <input id="total_contribution_months" class="form-control" type="text">
        </div>
        <div class="col-xs-6">
            <input id="age" class="form-control">
        </div>
    </div>        
</div>

Answer 2

We usually would not sacrifice responsiveness by putting all labels into one row.

Solution: add an arbitrary height for your label and then push all label text to the bottom.

label {
    height: 40px;
    vertical-align: bottom;
    display: table-cell;
    padding-bottom: 5px;
}

Plese note vertical-align is effective only when display: table-cell;.

JSFiddle