html - 在 Bootstrap 中定位相对于输入的标签

Question

我在 <input> 之前放置标签时遇到问题秒。我的意思是，标签应该在一行中的同一行并且最大 <label>' s 的高度应与最长的 <label> 相同的高度。

应该是这样的 this

非常感谢

.form-group {
    height: 60px;
}

.form-group:after {
    height: 100%;
    display: inline-block;
    content: "";
    vertical-align: bottom;
}

.control-label {
    display: inline-block;
    vertical-align: bottom;
}

<div class="container">
    <div class="row">

        <div class="col-xs-3 col-md-3 form-group">
            <label class="text-muted control-label" for="docType3">Option  Option  Option  Option  Option  Option   </label>
            <div>
                <select class="form-control" id="docType3">
                    <option>Option 1</option>
                    <option>Option 2</option>
                </select>
            </div>
        </div>

        <div class="col-xs-3 col-md-3 form-group">
            <label class="text-muted control-label" for="series3">Number </label>
            <div>
                <input type="text" class="form-control" id="series3" placeholder="">
            </div>
        </div>

    </div>
</div>

Answer 1

我是这样做的:

.control-label {
  display: table-cell;
  vertical-align: bottom;
  height: 100px;
  text-align: bottom;
}

Here is the JSFiddle demo