Twitter bootstrap 垂直对齐具有不同大小标签的输入元素

每当有多行标签时，我都会尝试在底部垂直对齐表单组

例如：

但随着电网系统的变化，情况可能会有所不同。

---

如何根据最大（占用的行数最多）标签对齐元素？

也许您可以像这样包装表中的所有元素

正常标签
一个巨大的标签有这么多的文字和这么多的文字的例子

正常标签
一个巨大标签的例子

---

这就是你的意思吗？

事实上，我刚刚找到了我正在寻找的解决方案，因此使用：

.row{
  display: flex; /* or inline-flex */
  flex-flow: row nowrap; /* is default: columns along the main-axis (row) and no wrapping to next lines */
  align-items: flex-end; /* bottom */

我实现了我想要的。例：

更新：这将改变类行的正常行为，因此我建议使用此属性时要谨慎。在我的例子中，我将在form.row中使用它，或者为这个元素分配另一个类。 与此解决方案相关的其他解决方案或意见将不胜感激

更新2:从

---

谢谢，但如果可能的话，我希望继续使用网格系统。更改元素的行为，如display:table，display:table cell谢谢提醒，我认为这样可以：

#small{
  margin-top:20px;
}

<table class="table">
    <tbody>
        <tr>
            <td>
                <label class="control-label">normal label</label></td>
            <td>
                <label class="control-label">example of a huge label that have so many text, and so much text</label></td>
        </tr>
        <tr>
            <td>
                <input class="form-control"></input></td>
            <td>
                <input class="form-control"></input></td>
        </tr>
    </tbody>
</table>

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-3">
            <div id="small" class="form-group">
                <label class="control-label">normal label</label>
                <input class="form-control"></input>
            </div>
        </div>
        <div class="col-xs-8">
            <div class="form-group">
                <label class="control-label">example of a huge label</label>
                <input class="form-control"></input>
         </div>
     </div>
</div>

.row{
  display: flex; /* or inline-flex */
  flex-flow: row nowrap; /* is default: columns along the main-axis (row) and no wrapping to next lines */
  align-items: flex-end; /* bottom */

form .row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -ms-flex-direction: row nowrap;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;

  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}