Question

我试图在底部垂直对齐表格组，只要我的某个标签有多条线。

<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-1">
        <div class="form-group">
            <label class="control-label">example of a huge label</label>
            <input class="form-control"></input>
        </div>
    </div>
</div>

我发现垂直对齐元素的唯一方法是在带有一个行标签的表单组中添加margin-top

#small{
  margin-top:20px;
}

但网格系统可能会有所不同。如何根据最大（占线数最多）标签对齐元素？

Answer 1

实际上我刚刚在here找到了我想要的解决方案，所以使用：

.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 */

我实现了我想要的。例如：jsfiddle

更新：这会改变行类的正常行为，所以我建议谨慎使用这些属性。在我的情况下，我将在形式.row 中使用它，或者为这些元素指定另一个类。其他与此解决方案相关的解决方案或评论表示赞赏。

更新2 Gorostas http://jsfiddle.net/9vtsojqg/8/

抬头后的新版本

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;
}

Answer 2

也许你可以像这样包装所有表格

http://jsfiddle.net/9vtsojqg/4/

<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>

Answer 3

<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>

这是你的意思吗？

垂直对齐具有不同尺寸标签的输入元素

3 个答案: